vue2和vue3的区别

目录

1. 双向数据绑定的原理发生了改变

2. vue3默认使用懒加载

3. vue3中新添加了TypeScript以及PWA的支持

4. 重构Virtual DOM

5. 生命周期发生变化

---

1. 双向数据绑定的原理发生了改变

        在vue3中使用proxy替换了vue2中的Object.defineProperty,

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了es6的proxyAPI对数据代理。

使用Proxy的优势：

1. defineProperty只能监听某个属性，不能对全对象监听
2. 可以省去for in、闭包等内容来提升效率（有一定的性能提升）
3. 可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化（可直接监听数组类型的数据变化）

2. vue3默认使用懒加载

        在2.x版本里。不管数据多大，都会在一开始就为其创建观察者，在数据很大时，就会造成性能的问题。在3.x中，只会对渲染出来的数据创建观察者，而且3.x的观察者更高效。

3. vue3中新添加了TypeScript以及PWA的支持

4. 重构Virtual DOM

1. 模板编译时的优化，将一些静态节点编译成常量
2. Slot优化，将slot编译为lazy函数，将slot的渲染的决定权交给子组织

5. 生命周期发生变化

Vue2                          vue3

beforeCreate        --> setup()        开始创建组件之前，创建的是data和method

created                 --> setup()

beforeMount         --> onBeforeMount      组件挂载到节点上之前执行的函数

mounted               --> onMounted             组件挂载完节点之后执行的函数

beforeUpdate       --> onBeforeUpdate     组件更新之前执行的函数

updated                --> onUpdated             组件更新完成之后执行的函数

beforeDestroy      --> onBeforeUnmount  组件卸载之前执行的函数

destroyed             --> onUnmounted        组件卸载完成后执行的函数

activated              --> onActivated