Vue3和Vue2对比，我们如何选用？

admin

Vue3带来的新变化
性能提升（零成本：从vue2切到vue3就享受到）

首次渲染更快，diff算法更快，内存占用更少，打包体积更小，....

更好的Typescript支持（在vue下写TS更方便了）

提供新的写代码的方式：Composition API （需要学习成本）

这些Vue2.0的语法不能用了
vue3.0对于2.0版本的大部分语法都是可以兼容的（之前是怎么写的，现在也正常写），但是也有一些破坏性的语法更新，这个大家要格外注意

        1.移除了vue实例上的$on方法 （eventBusVue.prototype.$eventBus=new Vue(); this.$on('事件名'， 回调)现有实现模式不再支持，可以使用三方插件替代）。下边是vue2中eventBus的用法
[mw_shl_code=applescript,true]Vue.prototype.$eventBus = new Vue()
组件1
this.$on('事件名', 回调)
组件2
this.$emit('事件名')[/mw_shl_code]

        2.移除过滤器选项 。下边是vue2中过滤器的用法：

[mw_shl_code=applescript,true]<div>{{ msg | format}}</div>
插值表达式里, 不能再使用过滤器filter， 可以使用methods替代
{{format(msg)}}[/mw_shl_code]
  3.移除 .sync语法（v-bind时不能使用.sync修饰符了，现在它v-model语法合并了）。下边是vue2中.sync的用法
[mw_shl_code=applescript,true]<el-dialog :visibel.sync="showDialog"/>  [/mw_shl_code]
小结
vue3发布已久，相关生态基本成熟，是学习的好时机；

新变化：性能提升；更好支持TS; 提供compositionAPI;

抛弃了：$on, filter, .sync

vue2和3的项目区别
主要看三个位置：

package.json

main.js

app.vue

package.json
首先我们可以看一下package.json文件，在dependencies配置项中显示，我们当前使用的版本为3
[mw_shl_code=applescript,true]"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.2.25"  // 版本号
}[/mw_shl_code]
main.js
[mw_shl_code=applescript,true]import Vue from 'vue'
import App from './App.vue'
new Vue({render: h => h(App)}).$mount('#app')[/mw_shl_code]
vue3.x的写法

[mw_shl_code=applescript,true]import { createApp } from 'vue'
import App from './App.vue' // 根组件
createApp(App).mount('#app')[/mw_shl_code]
app.vue
打开app.vue发现：vue3.0的单文件组件中不再强制要求必须有唯一根元素

[mw_shl_code=applescript,true]<template>
  
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>[/mw_shl_code]