为什么vue3中去掉了vue构造函数?

文章探讨了Vue2中全局构造函数导致的问题,如影响所有实例的副作用和模块化不足。相比之下,Vue3通过createApp提供了更好的组件隔离和treeshaking优化。
摘要由CSDN通过智能技术生成

因为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应用,其内部提供的方法是针对整个应用的,而不再是一个特殊的组件。

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值