Vue2 和 vue3 的区别

0. 双向数据绑定原理发生了改变，使用 proxy 替换 Object.defineProerty,使用 Proxy 的优势：  可直接监听数组类型的数据变化  监听的目标为对象本身，不需要像 Object.defineProperty 一样遍历每个属性，有一定的性能提升  可直接实现对象属性的新增/删除
1. 默认使用懒加载 在 2.x 版本里。不管数据多大，都会在一开始就为其创建观察者，在数据很大时，就会造成性能的问题。在 3.x 中，只会对渲染出来的数据创建观察者，而且 3.x 的观察者更高效。
2. 3.0 新加入了 TypeScript 以及 PWA 支持
3. 重构 Virtual DOM  模板编译时的优化，将一些静态节点编译成常量 Slot 优化，将 slot 编译为 lazy 函数，将 slot 的渲染的决定权交给子组织
4. 生命周期有了一定的区别 Vue2--------------vue3 beforeCreate -> setup() 开始创建组件之前，创建的是 data 和 method created -> setup() beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。 mounted -> onMounted 组件挂载完成后执行的函数 beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。 updated -> onUpdated 组件更新完成之后执行的函数。 beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。 destroyed -> onUnmounted 组件卸载之前执行的函数。 activated -> onActivated 组件卸载完成后执行的函数 deactivated -> onDeactivated

vue2中实现双向数据绑定代码如下不过此代码只能实现双向数据绑定并不会实时更新需要通过 for in 循环对对象进行循环遍历把kes值赋值给每一个vm就可以实现了

如图我们所赋值的数据会返回到set中 然后在get中取数据 通过return把数据返回给vm 下面是打印的结果

Vue3中的双向数据绑定实现

以下是打印结果

在Vue3中通过proxy就可以直接的将未添加的数据添加到data中