VUE真的很香啊？ vue2和vue3

Vue2和Vue3比较

j简单的说

1、2020年9月发布的正式版，Vue2即将定制更新
2、Vue3支持大多数的Vue2的特性
3、Vue中设计了一套强大的组合API代替了Vue2中的option API , 复用性更强了
4、更好的支持TS（TrueScript）
5、Vue3中使用了Proxy配合Reflect代替了Vue2中object.defineProperty()方法实现数据的响应式(数据代理)
6、重写了虚拟DOM , 速度更快了
7、新的组件:  Fragment(片段) /  Teleport(瞬移) /  Suspense( 不确定)
8、设计了一个新的脚手架工具 ,  vite

更多详情
1.vue2.0和3.0的初始化就存在着⼀定区别，⽐如vue3.0可以在安装脚⼿架同时提前安装好⼀些项⽬开发必备的插件，并且3.0提供了可视 化创建脚⼿架，可以更加⽅便的对插件和依赖进⾏管理和配置，同时两个版本的⽬录结构也是有些许差别的。

2.在开发过程中两个版本的使⽤⽅法虽然在表⾯上没有太⼤的⼀个区别，但是在他的底层⽅⾯去看的话区别还是很⼤的，其中就包括渲染⽅ 式，数据监听，双向绑定，⽣命周期，vue3更精准变更通知，

这⾥着重说⼀下关于双向绑定的更新，

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.definePropert()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。

vue3 中使⽤了 es6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽ 实现对数据的监控。

这⾥是引相⽐于vue2版本，使⽤proxy的优势如下1.defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）2.可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听。复制代码

3.另外vue3还新增了⼀些内置组件和⽅法，⽐如vue3可以默认进⾏懒观察，使⽤Function-based API，setup函数，对与插件或对象的⼀ 个按需引⼊，Computed Value ，新加⼊了 TypeScript 以及 PWA 的⽀持等等… 这⾥着重说⼀下vue3的⼀个按需引⼊

Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实⽆论你⽤到还是没⽤到，都会跑⼀遍，这样不仅提⾼了性能消耗，
也⽆疑增加了⽤户加载时间。

⽽vue3.0中可以⽤ES module imports按需引⼊，如：keep-alive内置组件、v-model指令，等等，不仅我们开发起来更加的便捷，减少 了内存消耗，也同时减少了⽤户加载时间，优化⽤户体验。

创建vue2和vue3项目的文件发生的变化
1.main.js中

核心代码：

createApp(App).mount('#app') = createApp(根组件).mount('public/index.html中的div容器')

1.vue2.0中是直接创建了一个vue实例
2.vue3.0中按需导出了一个createApp （ceateApp做了什么）
3.vue3中的app单文件不再强制要求必须有根元素 也就是说 在vue2.0中必须要有一个根元素，在vue3中没这个要求

数据双向绑定原理
Vue2使⽤的是Object.defineProperty()进⾏数据劫持，结合发布订阅的⽅式实现。

Vue3使⽤的是Proxy代理，使⽤ref或者reactive将数据转化为响应式数据

数据和方法的定义
Vue2使⽤的是选项类型API（Options API），Vue3使⽤的是合成型API（Composition API）

Vue2：

data() { return {}; }, methods:{ }

Vue3：

数据和⽅法都定义在setup中，并统⼀进⾏return{}

生命周期

获取props
vue2：console.log(‘props’,this.xxx)
vue3：setup(props,context){ console.log(‘props’,props) }

给父组件传值emit
vue2：this.$emit()
vue3：setup(props,context){context.emit()}

 作者：彦祖IceStar https://www.bilibili.com/read/cv17975620 出处：bilibili