vue3对比vue2的总结

一、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可以直接监听对象而非属性，并返回一个新对象，具有更好的响应式支持。

三、生命周期的不同

vue2 --------------- vue3
beforeCreate -> setup()
Created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroyed -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
如果要想在页面中使用生命周期函数，以往vue2的操作是直接在页面中写入生命周期，而vue3是需要去引用的，这就是为什么3能够将代码压缩到更低的原因。

import { onMounted,onActivated...} from 'vue'

四、默认项目目录结构的不同

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

五、vue3对全局API的优化

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

<script lang="ts" setup>
import { nextTick } from 'vue'
nextTick(() => {
  // 一些和DOM有关的东西
})
</script>

在入口文件中

// 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')

六、使用Proxy替代了defineProperty

Proxy 相比于 defineProperty 的优势：

  1. Object.defineProperty() 的问题主要有三个：
    （一）不能监听数组的变化
    （二）必须遍历对象的每个属性
    （三）必须深层遍历嵌套的对象
  2. Proxy 在 ES2015 规范中被正式加入，它有以下几个特点：
    （一）针对对象：针对整个对象，而不是对象的某个属性，所以也就不需要对 keys 进 行遍历。这解决了上述 Object.defineProperty() 第二个问题
    （二）支持数组：Proxy 不需要对数组的方法进行重载，省去了众多 hack，减少代码量等于减少了维护成本，而且标准的就是最好的。

除了上述两点之外，Proxy 还拥有以下优势：
（一）Proxy 的第二个参数可以有 13 种拦截方法，这比起 Object.defineProperty() 要更加丰富。
（二）Proxy 作为新标准受到浏览器厂商的重点关注和性能优化，相比之下 Object.defineProperty() 是一个已有的老方法。