vue2和vue3的区别整理（面试这一篇就够了）

vue2和vue3的区别

本文章将从源码层面、性能层面、api方面、hook函数增加代码复用性、代码写法方面、生命周期方面等6个方面简单描述vue2和vue3的区别

• 源码层面：

版本	区别
vue2	javascript 使用flow进行类型检测
vue3	源码使用typescript进行重构，vue对typescript支持更加友好了

• 性能层面

版本	区别
vue2	使用object.defineProperty来劫持数据的setter和getter方法，对象改变需要借助api去深度监听
vue3	使用Proxy来实现数据劫持，删除了一些api($on,$once,$off) fiter等，优化了Block tree,solt,diff 算法等

• api方面

版本	区别
vue2	OptionsAPI 在options里写data,methods,created等描述组件对象，多个逻辑可能在不不同地方，代码内聚性低
vue3	CompositionAPI 将模块相关代码统一放在一个地方处理，不需要在多个options里查找

• hook函数增加代码复用性
  • vue2使用mixins进行代码逻辑共享，mixins也是由一大堆options组成，如果有多个mixins则可能造成命名冲突等问题。
  • vue3可以通过hook函数 将一部分独立的逻辑抽离出去，并且也是响应式的
• 代码写法方面
  • vue3支持在template中写多个根，vue2只能有一个
  • 当内部有异步函数，需要使用到await的时候，可以直接使用，不需要在setup前面加async
• 生命周期方面（大多生命周期前加on）

vue2	vue3	生命周期
beforeCreate()	setup()	组件开始创建数据实例之前
created()	setup()	组件数据创建数据实例完成
beforeMount()	onBeforeAMount()	DOM挂载之前
mounted()	onMounted()	DOM挂载完成（页面完成渲染）
beforeUpdate()	onBeforeUpdate()	组件数据更新之前
undated()	onUpdated()	组件数据更新之后
beforeDestroy()	onBeforeunmount()	组件销毁之前
destroyed()	onUnmounted()	组件销毁之后

• 总结：
  • vue3，使用率逐年升高，版本目前很稳定，生态也比较完善，将会vue未来发展的主要趋势
  • vue3性能以及typescript的支持性也超越vue2
  • ts目前在前端也比较受欢迎，建议入坑