vue2和vue3区别

218 阅读1分钟

响应式系统:Vue2使用Object.defineProperty实现响应式,无法监听对象新增属性或删除属性,对数组的监听需特殊处理。Vue3改用Proxy实现响应式,全面支持对象和数组的动态增删改查,性能更好。

• API设计:Vue2基于选项式API,将data、methods、computed等分块,逻辑较为分散。Vue3新增组合式API,通过setup函数搭配ref和reactive,使逻辑可复用性更强,代码更聚合。

• 模板与组件:Vue2中,template下只允许存在一个根节点。Vue3支持碎片化,组件可以有多个根节点。此外,Vue3新增组件,可将模板移动到DOM中Vue应用之外的其他位置。

• 生命周期:Vue2有beforeCreate、created、beforeMount等生命周期钩子。Vue3移除了beforeCreate和created,用setup替代,beforeDestroy改为beforeUnmount,destroyed改为unmounted。

• 性能优化:Vue3支持tree - shaking,可按需编译代码,减少打包体积。其虚拟DOM的Diff算法增加了静态标记PatchFlag,能跳过无变化节点,还通过静态提升缓存静态节点,避免重复渲染,相比Vue2性能有较大提升。

• TypeScript支持:Vue2对TypeScript支持有限,Vue3源码用TypeScript重写,类型推断更友好,能更好地支持类型化组件和属性。

• 指令与插槽:Vue2使用slot,可直接使用。Vue3中必须使用v - slot的形式。Vue2中v - for与v - if同时使用时,v - for优先级高,且不建议一起使用;Vue3中v - if会被当作v - for中的一个判断语句,二者不会相互冲突。