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 算法等 |
版本 |
区别 |
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目前在前端也比较受欢迎,建议入坑