vue3与vue2核心优势对比 - proxy拦截器相比defineProperty

張張張_

已于 2022-03-04 00:56:18 修改

阅读量593

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 npm

于 2022-03-04 00:47:52 首次发布

本文链接：https://blog.youkuaiyun.com/zyj123__/article/details/123267598

版权

Vue3为了解决Vue2的弊端而诞生，引入了composition API和Proxy实现更好的逻辑复用和响应式。Proxy取代defineProperty，提供更全面的数据监听。Vue3还有性能提升、新特性和生命周期函数的改变，简化项目结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3对比Vue2的优点总结

我们使用vue2常常会遇到一些体验不太好的地方，比如：

随着功能的增长，需求的增加，复杂组件的代码越来越难以维护，逻辑混乱，虽然vue2也有一些复用的方法，但是都存在一定的弊端，比如我们常常用的Mixin,特别容易发生命名冲突，暴露出来的变量意图不是很明显，重用到其他组件容易冲突。
vue2对于typeScript的支持非常有限，没有考虑到ts的集成。

vue3的出现就是为了解决vue2的弊端，其composition API很好的解决了逻辑复用的问题,而且vue3源码就是用ts写的，对ts的支持非常好。我们在开发项目过程中可以使用ts的加持，使代码更加健壮。

vue3支持vue2的大多数特性，实现对vue2的兼容
vue3对比vue2具有明显的性能提升

打包大小减少41%
初次渲染快55%，更新快133%
内存使用减少54%

vue3具有的composition API实现逻辑模块化和重用
增加了新特性，如Teleport组件，全局API的修改和优化等

Vue2.x实现双向数据绑定原理，是通过es5的 Object.defineProperty，根据具体的key去读取和修改。其中的setter方法来实现数据劫持的，getter实现数据的修改。但是必须先知道想要拦截和修改的key是什么，所以vue