当前位置：首页 > news >正文

vue3.2响应式优化

news 来源：原创 2025/5/11 2:34:28

Vue 3.2 在响应式方面做了诸多优化，进一步提升了性能，下面为你详细介绍：

1. `shallowReactive` 和 `shallowRef` 的性能优势

原理：shallowReactive 和 shallowRef 是浅层响应式 API。shallowReactive 仅对对象的第一层属性进行响应式处理，而 shallowRef 只对 .value 的赋值操作进行响应式跟踪，不会递归地将嵌套对象转换为响应式对象。
性能提升体现：在处理大型数据结构时，如果只需要对对象的浅层属性进行响应式更新，使用 shallowReactive 和 shallowRef 可以避免对深层嵌套对象进行不必要的代理转换，减少了初始化时的性能开销。例如，当你有一个包含大量嵌套数据的对象，但只需要监听其顶层属性的变化时，使用 shallowReactive 能显著提高性能。

<template>
  <div>
    <button @click="updateTopLevel">Update Top Level</button>
    <p>{{ state.topLevelProp }}</p>
  </div>
</template>

<script setup>
import { shallowReactive } from 'vue';

const state = shallowReactive({
  topLevelProp: 'Initial Value',
  nested: {
    deepProp: 'Deep Value'
  }
});

const updateTopLevel = () => {
  state.topLevelProp = 'New Value';
};
</script>

2. `markRaw` 减少响应式开销

原理：markRaw 函数可以标记一个对象，使其永远不会被转换为响应式对象。当你有一些大型的第三方库对象或者不需要进行响应式处理的对象时，可以使用 markRaw 来避免 Vue 对其进行不必要的代理包装。
性能提升体现：避免了对这些对象进行响应式转换所带来的性能损耗，同时也减少了内存占用。例如，在引入一个大型的图表库对象时，使用 markRaw 可以防止 Vue 对其进行递归代理，从而提高应用的性能。

<template>
  <div>
    <!-- 使用标记为原始的对象 -->
  </div>
</template>

<script setup>
import { markRaw } from 'vue';
import LargeLibraryObject from 'large-library';

const rawObject = markRaw(LargeLibraryObject);
</script>

3. 响应式系统的优化

原理：Vue 3.2 对响应式系统的内部实现进行了优化，减少了依赖收集和触发更新时的开销。在依赖收集过程中，采用了更高效的数据结构和算法，使得追踪依赖的过程更加快速和准确。
性能提升体现：在复杂的组件树中，当数据发生变化时，能够更快地确定哪些组件需要更新，从而减少不必要的重新渲染。例如，在一个包含大量嵌套组件的应用中，当某个数据发生变化时，响应式系统可以更精准地找到依赖该数据的组件，避免了对整个组件树的遍历和重新渲染。

4. `toRef` 和 `toRefs` 的高效使用

原理：toRef 和 toRefs 用于创建响应式引用，它们可以在不失去响应性的情况下，将对象的属性单独提取出来。toRef 可以创建单个属性的响应式引用，而 toRefs 可以将对象的所有属性转换为响应式引用。
性能提升体现：在解构响应式对象时，使用 toRefs 可以避免失去响应性，同时也减少了因解构而导致的依赖重新收集和更新的开销。例如，在组件中使用 toRefs 解构 props 对象时，可以确保在父组件更新 props 时，子组件能够正确响应变化，而不需要额外的性能开销。

<template>
  <div>
    <p>{{ propRef }}</p>
  </div>
</template>

<script setup>
import { toRef } from 'vue';
const props = defineProps({
  myProp: String
});
const propRef = toRef(props, 'myProp');
</script>

综上所述，Vue 3.2 在响应式方面的这些优化措施，使得开发者能够更灵活地控制响应式数据的创建和使用，从而提高应用的性能和响应速度。

数据结构优化
Vue 3 在依赖收集过程中采用了一些高效的数据结构和算法，以提升追踪依赖的速度和准确性，下面为你详细介绍：

1. WeakMap

原理

WeakMap 是 JavaScript 中的一种数据结构，它的键必须是对象，并且这些对象是弱引用的。这意味着如果没有其他地方引用这些对象，它们可以被垃圾回收机制自动回收，而不会造成内存泄漏。

在 Vue 3 中的应用

在 Vue 3 的响应式系统里，WeakMap 被用于存储对象和其对应的 Dep（依赖）对象之间的映射关系。当一个响应式对象被创建时，Vue 会为其在 WeakMap 中创建一个对应的 Dep 对象，用于存储依赖该对象的副作用函数（如组件的渲染函数）。这样，当对象的属性发生变化时，Vue 可以通过 WeakMap 快速找到对应的 Dep 对象，进而通知所有依赖该对象的副作用函数进行更新。

示例代码（简化示意）

const targetMap = new WeakMap();

function track(target, key) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
        depsMap = new Map();
        targetMap.set(target, depsMap);
    }
    let dep = depsMap.get(key);
    if (!dep) {
        dep = new Set();
        depsMap.set(key, dep);
    }
    // 假设 activeEffect 是当前正在执行的副作用函数
    if (activeEffect) {
        dep.add(activeEffect);
    }
}

function trigger(target, key) {
    const depsMap = targetMap.get(target);
    if (depsMap) {
        const dep = depsMap.get(key);
        if (dep) {
            dep.forEach(effect => effect());
        }
    }
}

2. Map

原理

Map 是 JavaScript 中的一种键值对数据结构，它允许使用任意类型的值作为键。与普通对象不同，Map 可以更方便地进行键值对的管理和查找操作。

在 Vue 3 中的应用

在上述 WeakMap 的基础上，每个响应式对象对应的 Dep 对象存储在 Map 中，键是对象的属性名，值是一个 Set，用于存储依赖该属性的副作用函数。通过 Map，Vue 可以快速定位到对象的某个属性对应的依赖集合，从而在属性值发生变化时通知这些依赖进行更新。

3. Set

原理

Set 是 JavaScript 中的一种集合数据结构，它存储唯一的值，不允许重复。Set 提供了高效的添加、删除和查找操作。

在 Vue 3 中的应用

在 Vue 3 的依赖收集过程中，Set 被用于存储依赖某个属性的副作用函数。当一个属性被访问时，会将当前正在执行的副作用函数添加到该属性对应的 Set 中；当属性值发生变化时，会遍历这个 Set 并执行其中的所有副作用函数。使用 Set 可以确保每个副作用函数只被添加一次，避免重复执行。