因为vue支持多实例共存,当遇到一个页面有多个vue应用时,就会遇到一些问题,例如,当我想在其中一个实例上使用Vue.mixin()时,会导致全部实例都受到影响,示例如下
// vue2
<div id="app1"></div>
<div id="app2"></div>
<script>
Vue.use(...); // 此代码会影响所有的vue应用
Vue.mixin(...); // 此代码会影响所有的vue应用
Vue.component(...); // 此代码会影响所有的vue应用
new Vue({
// 配置
}).$mount("#app1")
new Vue({
// 配置
}).$mount("#app2")
</script>
在vue3
中,去掉了Vue
构造函数,转而使用createApp
创建vue
应用,这种方式更加模块化并且更好地支持TypeScript类型推断
// vue3
<div id="app1"></div>
<div id="app2"></div>
<script>
createApp(根组件).use(...).mixin(...).component(...).mount("#app1")
createApp(根组件).mount("#app2")
</script>
总结(vue2的全局构造函数带来的问题):
1、调用构造函数的静态方法会对所有的vue应用生效,不利于隔离不同应用
2、vue2的构造函数集成了太多的功能,不利于tree shaking;vue3中把这些功能使用普通函数导出,例如
import { createApp } from 'vue'
采用具名导入的方法,能够充分应用tree shaking优化打包体积
3、vue2中并没有把组件实例和vue应用两个概念区分开,通过new Vue创建的对象,即是一个vue应用,也是一个特殊的组件实例;vue3中进行了区分,通过createApp创建的对象,是一个vue应用,其内部提供的方法是针对整个应用的,而不再是一个特殊的组件。