vue2 和 vue3 区别理解

一、vue3 的理解和区别

1、性能优化

双向响应原理由Object.defineProperty改为基于ES6的Proxy，使其颗粒度更大，速度更快，且消除了之前存在的警告、重写了 Vdom ，使其突破了 Vdom 的性能瓶颈、进行了模板编译的优化、进行了更加高效的组件初始化

Tree-Shaking 的支持

支持了tree-shaking（剪枝）：像修剪树叶一样把不需要的东西给修剪掉，使 Vue3 的体积更小。

需要的模块才会打入到包里，优化后的 Vue3.0 的打包体积只有原来的一半（13kb）。哪怕把所有的功能都引入进来也只有23kb，依然比 Vue2.x 更小。像keep-alive、transition甚至v-for等功能都可以按需引入。

Composition API

composition-api是一个 Vue3 中新增的功能，它的灵感来自于React Hooks，是比mixin更强大的存在。

composition-api可以提高代码逻辑的可复用性，从而实现与模板的无关性；同时使代码的可压缩性更强。另外，把Reactivity模块独立开来，意味着 Vue3.0 的响应式模块可以与其他框架相组合。composition-api把复杂组件的逻辑抽地更紧凑，而且可以将公共逻辑进行抽取。

Fragments

不再限制template只有一个根节点。

render函数也可以返回数组了，有点像React.Fragments

Better TypeScript Support

更好的类型推导，使得 Vue3 把TypeScript支持得非常好

Custom Renderer API

实现用DOM的方式进行WebGL编程

二、vue2 和3 的区别

1、默认进行懒观察（lazy observation）

在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

2、更精准的变更通知。

举例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。3.、新加入了 TypeScript 以及 PWA 的支持

3、vue2和vue3双向数据绑定原理发生了改变

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

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

相比于vue2.x，使用proxy的优势如下

defineProperty只能监听某个属性，不能对全对象监听

可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

4、LifeCycle(Hooks) 3.0当中的生命周期与2.0的生命周期出现了很大的不同：

　　beforeCreate -> 请使用 setup()

　　created -> 请使用 setup()

　　beforeMount -> onBeforeMount

　　mounted -> onMounted

　　beforeUpdate -> onBeforeUpdate

　　updated -> onUpdated

　　beforeDestroy -> onBeforeUnmount

　　destroyed -> onUnmounted

　　errorCaptured -> onErrorCaptured