Vue3相比于Vue2进行了哪些更新

news2024/9/22 13:37:23

1、响应式原理

vue2

vue2中采用 defineProperty 来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，结合发布订阅模式实现响应式。

存在的问题：

检测不到对象属性的添加和删除
数组API方法无法监听到
需要对每个属性进行遍历监听，如果嵌套对象，需要深层监听，造成性能问题

Vue3

vue3采用proxy重写了响应式系统，proxy的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作。
proxy可以直接监听数组的变化。

2、语法API

vue2

Options API，即选项API。以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑。
然而，当组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解。

Vue3

Composition API，即组合式API。组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）。
即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API。

3、Vue3支持多个根节点

Vue2中，组件只能有一个根节点；
Vue3中，组件可设置多个根节点；

4、生命周期

Vue 3 新增了 setup() 函数，替代了 Vue 2 的 beforeCreate 和 created 钩子函数。在 setup() 函数中，我们可以直接访问组件的实例属性和方法，以及通过 next() 函数来访问父组件中的属性和方法。
在这里插入图片描述

5、Tree Shaking

tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术。主要是借助ES6模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量。
Vue3源码引入tree shaking特性，将全局 API 进行分块。如果您不使用某些功能，它们将不会包含在您的基础包中。

6、Diff算法优化

Vue2

当数据发生变化，它就会新生成一个DOM树，并和之前的DOM树进行比较，找到不同的节点然后更新。但这比较的过程是全量的比较，也就是每个节点都会彼此比较。但其中很显然的是，有些节点中的内容是不会发生改变的，那我们对其进行比较就肯定消耗了时间。

Vue3

在创建虚拟DOM树的时候，会根据DOM中的内容会不会发生变化，添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候，就只会对比这些带有静态标记的节点。

7、静态提升

Vue2中无论元素是否参与更新，每次都会重新创建，然后再渲染。
Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用。
例子：

<span>你好</span>
<div>{{ message }}</div>

没有做静态提升之前

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock(_Fragment, null, [
    _createVNode("span", null, "你好"),
    _createVNode("div", null, _toDisplayString(_ctx.message), 1 /* TEXT */)
  ], 64 /* STABLE_FRAGMENT */))
}

做了静态提升之后

const _hoisted_1 = /*#__PURE__*/_createVNode("span", null, "你好", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock(_Fragment, null, [
    _hoisted_1,
    _createVNode("div", null, _toDisplayString(_ctx.message), 1 /* TEXT */)
  ], 64 /* STABLE_FRAGMENT */))
}

// Check the console for the AST