单页应用多次使用Vue组件：JS是否重复加载？方法会多次调用吗？

嘿，这个问题问得很到位，刚好是Vue组件开发里很基础但容易混淆的点，我来给你拆解清楚：

答案是不会。在单页应用（SPA）中，同一个Vue组件的JS代码只会被浏览器加载一次：

• 当你打包应用时，组件的代码（比如.vue文件编译后的逻辑）会被合并到应用的bundle或者按需加载的chunk文件中；
• 一旦这个chunk被浏览器请求、解析并执行后，就会被存在内存里；
• 后续不管你创建多少个该组件的实例，都是复用这段已经加载好的代码，不会再发起新的网络请求去重复加载。

举个实际的例子：你写了一个Card.vue组件，在页面里循环渲染了10个。打包后对应的Card相关JS只会被加载一次，所有10个实例共享这段代码的定义。

这个得分情况说，核心要记住：每个组件实例都是独立的，拥有自己的上下文和状态。

针对你举的“实例化3次组件，调用方法a”的场景：

• 如果是调用单个实例的方法a：比如你通过ref获取到其中某一个组件实例，然后调用它的a()方法，那只会执行1次，而且是这个特定实例的方法逻辑；
• 如果是触发所有实例执行方法a：比如你用全局事件总线发送了一个事件，3个组件实例都监听了这个事件并在回调里执行a()，或者通过状态管理工具（如Pinia）的状态变化触发了所有实例的方法，那每个实例的a()都会执行一次，总共3次。

另外补充个细节：组件的方法其实是挂载在组件原型上的，所有实例共享方法的代码，但执行方法时的this会指向当前实例，所以每个实例执行方法时操作的是自己的data、props等状态，不会互相干扰。

内容的提问来源于stack exchange，提问作者Chris