Vue3对比Vue2

2023-07-18 14:46| 来源: 网络整理| 查看: 265

使用vue2也有好几年了，vue3出来后立马去官网学习并使用了一下，以下梳理一些自己的感悟。

1.为什么要有vue3

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

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

vue2对于typeScript的支持非常有限，没有考虑到ts的集成。

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

2.vue3的优点 vue3支持vue2的大多数特性，实现对vue2的兼容 vue3对比vue2具有明显的性能提升打包大小减少41% 初次渲染快55%，更新快133% 内存使用减少54% vue3具有的composition API实现逻辑模块化和重用增加了新特性，如Teleport组件，全局API的修改和优化等 3.响应式原理的不同

Vue2.x实现双向数据绑定原理，是通过es5的 Object.defineProperty，根据具体的key去读取和修改。其中的setter方法来实现数据劫持的，getter实现数据的修改。但是必须先知道想要拦截和修改的key是什么，所以vue2对于新增的属性无能为力，比如无法监听属性的添加和删除、数组索引和长度的变更，vue2的解决方法是使用Vue.set(object, propertyName, value) 等方法向嵌套对象添加响应式。

Vue3.x使用了ES2015的更快的原生proxy 替代 Object.defineProperty。Proxy可以理解成，在对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy可以直接监听对象而非属性，并返回一个新对象，具有更好的响应式支持

4.生命周期的不同

beforeCreate -> 请使用 setup()

created -> 请使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

如果要想在页面中使用生命周期函数，以往vue2的操作是直接在页面中写入生命周期，而vue3是需要去引用的，这就是为什么3能够将代码压缩到更低的原因

5.默认项目目录结构的不同

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

6.vue3对全局API的优化

在 Vue3 中，全局和内部 API 都经过了重构，并考虑到了 tree-shaking 的支持。因此，全局 API现在只能作为 ES 模块构建的命名导出进行访问。

import { nextTick } from 'vue' nextTick(() => { // 一些和DOM有关的东西 }) 复制代码

入口文件

// vue2写法 // vue2全局配置的修改，会修改Vue对象的属性 // 在不同的app中，共享一份有着不同配置的Vue对象，也变得非常困难 import Vue from 'vue' import App from './App.vue' Vue.config.xx=xx Vue.use(...) Vue.mixin(...) new Vue({ render:h=>h(app) }).$mount('#app') // vue3写法 import { createApp } from 'vue' import App from './App.vue' const app = createApp(APP) // 创建一个app实例 app.config.xx=xx // 在实例上修改配置，不会发生冲突 app.use(...) app.mixin(...) app.mount('#app') 复制代码 7.更多资料 vue3源码 vue3官网

【本文地址】

公司简介

联系我们