vue2与vue3的区别对比

东明兄 2021-06-13
0条评论 1,654 次浏览
东明兄 2021-06-130条评论 1,654 次浏览

vue2 是 选项式API(Option API),逻辑会散乱在文件不同位置(data、props、computed、watch、生命周期函数等),导致代码的可读性变差,写一个功能需要辗转各处。Vue3 组合式API(Composition API)很好地解决了这个问题,可将同一逻辑的内容写到一起,但是vue3中依然可以使用vue2 的选项式api。

这里记录一写vue3与vue2的主要差异

根节点

vue2中,组件只能有一个根节点,导致我们编写页面时经常在最外层套一个div来包裹html结构,这样就产生了多余的结构,在一些特殊场景下多包裹一层也不合适,比如在flex布局中就不能在父元素和子元素中间再包一层,vue3解决了这个问题,vue3可以多个根节点。

生命周期对比:

vue2 vue3
beforeCreate
created
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted

响应式原理变更

vue2通过Object.defineProperty实现,vue3 通过Proxy函数实现。
Object.defineProperty不能直接监听数组、对象的元素变化(vue通过重写方法实现,例如数组的push、shift等)
proxy是es6特性,不兼容ie11以下浏览器,能够全面控制外部对对象的访问。

Diff性能优化

区分静态节点和动态节点,只对比动态节点,提高diff性能。

Typescript

vue3完全由ts重写,有更好的ts支持。

持续更新....

发表评论

您的电子邮箱地址不会被公开。