VueUse useScriptTag 动态加载js文件

在Vue框架中我们可以使用VueUse useScriptTag 来动态加载js文件，可以自动加载也可以由你手动控制何时加载js文件,当Vue组件卸载时间自动卸载已加载的文件。

代码示例

import { useScriptTag } from '@vueuse/core'
useScriptTag(
  'https://www.itxst.com/js/jquery.js',
  // on script tag loaded.
  (el: HTMLScriptElement) => {
    // JS加载完成事件
  },
)

详细配置

import { useScriptTag } from '@vueuse/core'
import { ref } from 'vue';
//load手动加载方法，unload手动卸载方法
const { scriptTag, load, unload }=useScriptTag(
  'https://www.itxst.com/js/jquery.js',
  // on script tag loaded.
  (el: HTMLScriptElement) => {
    // JS加载完成事件
  },
  {
    manual: true ,//true表示手动加载
    async:true, //异步加载JS
    type:"text/javascript" ,//script标签TYPE属性
    //crossOrigin:"anonymous",//是否跨域请求 anonymous/use-credentials
    /*referrer策略
    no-referrer  no-referrer-when-downgrade origin origin-when-cross-origin
    same-origin strict-origin strict-origin-when-cross-origin unsafe-url
    */
    referrerPolicy:"no-referrer",
    noModule:false,
    defer:false,//文档完成解析后加载
    attrs:{"site":"www.itxst.com"} //Record<string, string>
  },
)

在线例子

例子