Vue2/Vue3的异同

Vue3 的优点

1. Vue3 支持 Vue2 的大多数特性，实现对 Vue2 的兼容

2. Vue3 对比 Vue2 具有明显的性能提升

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

3. Vue3 具有的 composition API 实现逻辑模块化和重用

4. 增加了新特性，如 Teleport 组件，全局 API 的修改和优化等

响应式原理的不同

Vue2.x 实现双向数据绑定原理，是通过 es5 的 Object.defineProperty，根据具体的 key 去读取和修改。其中的 setter 方法来实现数据劫持的，getter 实现数据的修改。但是必须先知道想要拦截和修改的 key 是什么，所以 vue2 对于新增的属性无能为力，比如无法监听属性的添加和删除、数组索引和长度的变更，vue2 的解决方法是使用 Vue.set(object, propertyName, value) 等方法向嵌套对象添加响应式。 Vue3.x 使用了 ES2015 的更快的原生 proxy 替代 Object.defineProperty。Proxy 可以理解成，在对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 可以直接监听对象而非属性，并返回一个新对象，具有更好的响应式支持

生命周期的不同

beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

默认项目目录结构的不同

vue3 移除了配置文件目录，config 和 build 文件夹，移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中，在 src 文件夹中新增了 views 文件夹，用于分类视图组件和公共组件

注：Vue3 官方文档open in new windowVue3 源码open in new window

转载自：Vue3 对比 Vue2open in new window