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

Posted 2022-02-05 SunFlower914

Vue3带来的新变化

1. 性能提升（零成本：从vue2切到vue3就享受到）

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

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

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

这些Vue2.0的语法不能用了

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

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

Vue.prototype.$eventBus = new Vue()
组件1
this.$on('事件名', 回调)
组件2
this.$emit('事件名')

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

<div> msg | format</div>
插值表达式里, 不能再使用过滤器filter， 可以使用methods替代
format(msg)

        3.移除 .sync语法（v-bind时不能使用.sync修饰符了，现在它v-model语法合并了）。下边是vue2中.sync的用法

<el-dialog :visibel.sync="showDialog"/>  

小结

1. vue3发布已久，相关生态基本成熟，是学习的好时机；

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

3. 抛弃了：$on, filter, .sync

vue2和3的项目区别

主要看三个位置：

1. package.json

2. main.js

3. app.vue

package.json

首先我们可以看一下package.json文件，在dependencies配置项中显示，我们当前使用的版本为3

"dependencies": 
    "core-js": "^3.6.5",
    "vue": "^3.2.25"  // 版本号

main.js

import Vue from 'vue'
import App from './App.vue'
new Vue(render: h => h(App)).$mount('#app')

vue3.x的写法

import  createApp  from 'vue'
import App from './App.vue' // 根组件
createApp(App).mount('#app')

app.vue

打开app.vue发现：vue3.0的单文件组件中不再强制要求必须有唯一根元素

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

以上就我们当前阶段需要关注的所有的内容，接下来我们就可以基于当前环境学习vue3的知识点了。