vue框架如何加载脚本

在Vue框架中加载脚本有多种方法，1、使用Vue实例中的mounted生命周期钩子，2、通过<script>标签直接在组件模板中引入，3、在Vue CLI项目中通过Webpack配置引入外部脚本。这些方法各有优缺点，可以根据具体需求选择合适的方法。

一、使用Vue实例中的`mounted`生命周期钩子

在Vue组件的生命周期中，mounted钩子函数是在组件挂载到DOM之后执行的。在这个阶段，可以动态地加载外部脚本。以下是一个示例：

export default {
  name: 'ExampleComponent',
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://example.com/external-script.js';
    script.onload = () => {
      console.log('Script loaded successfully.');
    };
    document.head.appendChild(script);
  }
}

这种方法的优点是可以确保脚本在组件渲染完成后加载，并且可以动态地决定是否加载某个脚本。缺点是如果有多个组件需要加载相同的脚本，可能会导致重复加载的问题。