Vue中的响应性粒度优化：使用`shallowRef`与`markRaw`减少依赖追踪开销 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 中的响应性粒度优化：使用 `shallowRef` 与 `markRaw` 减少依赖追踪开销

大家好！今天我们来深入探讨 Vue 中响应性系统的一个重要优化策略：如何利用 shallowRef 和 markRaw 来减少依赖追踪开销，从而提升应用的性能。Vue 的响应式系统是其核心特性之一，它使得状态变化能够自动触发视图更新。然而，如果使用不当，过度的响应式追踪可能会带来性能瓶颈。通过理解 shallowRef 和 markRaw 的作用，并合理地应用它们，我们可以有效地控制响应性粒度，优化性能。

Vue 响应式系统的基础：依赖追踪

在深入 shallowRef 和 markRaw 之前，我们先回顾一下 Vue 响应式系统的基本原理。Vue 使用 Proxy 对象来拦截对数据的访问和修改。当组件在模板中使用响应式数据时，Vue 会建立一个依赖关系，将该组件与该数据关联起来。当数据发生变化时，Vue 会通知所有依赖该数据的组件进行更新。

这个过程可以简单概括为：

数据访问： 当组件访问响应式数据时，触发 Proxy 的 get 陷阱。
依赖收集： 在 get 陷阱中，Vue 会记录当前正在执行的组件（或者更准确地说，当前正在执行的渲染函数）与被访问的数据之间的依赖关系。
数据修改： 当响应式数据被修改时，触发 Proxy 的 set 陷阱。
触发更新： 在 set 陷阱中，Vue 会通知所有依赖该数据的组件重新渲染。

这种依赖追踪机制是 Vue 响应式系统的基石，它使得组件能够自动响应数据的变化。

为什么要优化响应性粒度？

虽然 Vue 的响应式系统非常强大，但也存在一些潜在的性能问题。如果我们在应用中创建了大量的响应式对象，或者对一些不需要进行响应式追踪的数据也进行了响应式处理，那么就会增加依赖追踪的开销，导致性能下降。

具体来说，过度的响应式追踪会带来以下问题：

内存占用增加： Vue 需要维护所有响应式数据的依赖关系，这会增加内存占用。
计算开销增加： 当数据发生变化时，Vue 需要遍历所有依赖该数据的组件，并通知它们进行更新，这会增加计算开销。
不必要的更新： 有些数据可能并不需要进行响应式追踪，但如果仍然将其转换为响应式数据，就会导致不必要的更新，浪费资源。

因此，我们需要根据实际情况，合理地控制响应性粒度，只对需要进行响应式追踪的数据进行响应式处理，避免过度的响应式追踪。

`shallowRef`：浅层响应式引用

shallowRef 是 Vue 3 提供的一个 API，用于创建一个浅层响应式的引用。与 ref 不同，shallowRef 只会对最外层的值进行响应式处理，而不会递归地将内部的属性转换为响应式数据。

ref vs shallowRef

特性	`ref`	`shallowRef`
响应式深度	深度响应式，递归地将内部属性转换为响应式	浅层响应式，只对最外层的值进行响应式处理
适用场景	需要深度响应式的复杂对象	只需要监听顶层变化的简单对象或大型对象
性能影响	较高的依赖追踪开销	较低的依赖追踪开销

使用示例：

<template>
  <div>
    <p>Count: {{ count.value.num }}</p>
    <button @click="increment">Increment</button>
    <p>Raw Data: {{ rawData }}</p>
  </div>
</template>

<script setup>
import { ref, shallowRef, onMounted } from 'vue';

// 使用 ref 创建一个响应式对象
const count = ref({ num: 0 });

// 使用 shallowRef 创建一个浅层响应式对象
const shallowCount = shallowRef({ num: 0 });

// 原始数据，不进行响应式处理
const rawData = { name: 'Vue', version: 3 };

const increment = () => {
  // 修改 ref 对象内部的属性，会触发视图更新
  count.value.num++;

  // 修改 shallowRef 对象内部的属性，不会触发视图更新
  shallowCount.value.num++; // 不会触发视图更新，除非 shallowCount.value 被替换

  console.log('count', count.value.num)
  console.log('shallowCount', shallowCount.value.num)
};
</script>

在这个例子中，count 是一个使用 ref 创建的响应式对象，当 count.value.num 的值发生变化时，会触发视图更新。而 shallowCount 是一个使用 shallowRef 创建的浅层响应式对象，当 shallowCount.value.num 的值发生变化时，不会触发视图更新。只有当 shallowCount.value 被替换为一个新的对象时，才会触发视图更新。

适用场景：

大型数据结构： 当处理大型数据结构时，如果只需要监听顶层变化，可以使用 shallowRef 来减少依赖追踪开销。
外部库集成： 当与外部库集成时，外部库返回的对象可能不需要进行响应式处理，可以使用 shallowRef 来避免不必要的响应式追踪。
性能优化： 当需要手动控制响应性粒度时，可以使用 shallowRef 来减少依赖追踪开销，提高性能。

`markRaw`：标记对象为非响应式

markRaw 是 Vue 3 提供的另一个 API，用于将一个对象标记为非响应式。被 markRaw 标记的对象将不会被转换为响应式数据，也不会被进行依赖追踪。

作用：

阻止响应式转换： 阻止 Vue 将对象转换为响应式数据。
减少依赖追踪： 减少依赖追踪开销，提高性能。
避免不必要的更新： 避免对不需要进行响应式追踪的数据进行更新。

使用示例：

<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script setup>
import { reactive, markRaw } from 'vue';

// 创建一个原始对象
const rawUser = { name: 'Alice', age: 30 };

// 使用 markRaw 将原始对象标记为非响应式
markRaw(rawUser);

// 使用 reactive 将原始对象转换为响应式对象
const user = reactive(rawUser);

const updateName = () => {
  // 修改原始对象的属性，不会触发视图更新
  rawUser.name = 'Bob';

  // 修改响应式对象的属性，会触发视图更新
  user.name = 'Charlie';
};
</script>

在这个例子中，rawUser 是一个原始对象，我们使用 markRaw 将其标记为非响应式。然后，我们使用 reactive 将 rawUser 转换为响应式对象 user。当我们修改 rawUser.name 的值时，不会触发视图更新，因为 rawUser 已经被标记为非响应式。而当我们修改 user.name 的值时，会触发视图更新，因为 user 是一个响应式对象。

适用场景：

大型不可变数据： 当处理大型不可变数据时，可以使用 markRaw 来避免不必要的响应式追踪。
第三方库对象： 当使用第三方库返回的对象时，如果不需要进行响应式处理，可以使用 markRaw 来避免不必要的响应式追踪。
性能敏感区域： 在性能敏感区域，可以使用 markRaw 来减少依赖追踪开销，提高性能。

注意事项：

markRaw 只能标记对象，不能标记原始类型数据（如字符串、数字、布尔值等）。
markRaw 标记的对象及其所有子对象都会被标记为非响应式。
markRaw 标记的对象不能被转换为响应式数据。

`shallowReactive` vs `reactive`

shallowReactive 类似于 shallowRef，但它作用于对象而不是 ref。它创建一个响应式对象，但只有对象的顶层属性是响应式的，深层嵌套的属性则不是。这可以显著减少大型对象的响应式开销。

特性	`reactive`	`shallowReactive`
响应式深度	深度响应式，递归地将内部属性转换为响应式	浅层响应式，只对对象的最外层属性进行响应式处理
适用场景	需要深度响应式的复杂对象	只需要监听顶层属性变化的复杂对象
性能影响	较高的依赖追踪开销	较低的依赖追踪开销

使用示例：

<template>
  <div>
    <p>Name: {{ state.profile.name }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

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

// 使用 reactive 创建一个深度响应式对象
const state = reactive({
  profile: {
    name: 'Alice',
    age: 30
  }
});

// 使用 shallowReactive 创建一个浅层响应式对象
const shallowState = shallowReactive({
  profile: {
    name: 'Bob',
    age: 35
  }
});

const updateName = () => {
  // 修改 state.profile.name，会触发视图更新
  state.profile.name = 'Charlie';

  // 修改 shallowState.profile.name，不会触发视图更新
  shallowState.profile.name = 'David';

  // 替换 profile 对象，会触发视图更新
  shallowState.profile = { name: 'Eve', age: 40 };
};
</script>

在这个例子中，修改 state.profile.name 会触发视图更新，因为 state 是一个深度响应式对象。而修改 shallowState.profile.name 不会触发视图更新，因为 shallowState 是一个浅层响应式对象，只有顶层属性是响应式的。但是，替换 shallowState.profile 对象会触发视图更新，因为 profile 作为一个顶层属性被替换了。

应用场景案例：优化大型表格组件

假设我们有一个大型表格组件，需要展示大量的数据。如果我们将所有数据都转换为响应式数据，那么就会增加依赖追踪的开销，导致性能下降。在这种情况下，我们可以使用 shallowRef 和 markRaw 来优化性能。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="column in columns" :key="column.key">{{ row[column.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { ref, onMounted, markRaw } from 'vue';

const columns = ref([
  { key: 'id', title: 'ID' },
  { key: 'name', title: 'Name' },
  { key: 'age', title: 'Age' }
]);

const data = ref([]);

onMounted(() => {
  // 模拟从 API 获取大量数据
  const fetchData = async () => {
    const response = await fetch('/api/data');
    const rawData = await response.json();

    // 使用 markRaw 标记每个数据项为非响应式
    const nonReactiveData = rawData.map(item => markRaw(item));

    // 使用 shallowRef 存储数据
    data.value = nonReactiveData;
  };

  fetchData();
});
</script>

在这个例子中，我们从 API 获取大量数据，并使用 markRaw 将每个数据项标记为非响应式。然后，我们使用 shallowRef 将数据存储在 data 变量中。这样，我们就避免了对所有数据进行响应式追踪，从而减少了依赖追踪的开销，提高了性能。

优化理由：

表格数据通常是静态的，不需要进行响应式追踪。
使用 markRaw 可以避免对每个数据项进行响应式转换，减少内存占用。
使用 shallowRef 可以避免对整个数据数组进行深度响应式追踪，减少计算开销。

总结：合理利用 API 优化响应性粒度

Vue 的响应式系统非常强大，但也需要合理地使用。通过理解 shallowRef、markRaw 和 shallowReactive 的作用，并根据实际情况选择合适的 API，我们可以有效地控制响应性粒度，减少依赖追踪开销，提高应用的性能。记住，并非所有数据都需要是响应式的，合理地使用这些 API 可以帮助我们构建更高效的 Vue 应用。

应用场景选择

场景	推荐 API	理由
大型不可变数据（如配置对象）	`markRaw`	避免不必要的响应式追踪和转换，节省内存和计算资源。
与外部库集成，返回对象无需响应式处理	`markRaw`	阻止 Vue 对外部库返回的对象进行响应式处理，避免潜在的冲突和性能问题。
大型数据结构，只需监听顶层变化	`shallowRef` / `shallowReactive`	减少深层嵌套属性的响应式追踪开销，只关注顶层变化。
性能敏感区域，需要手动控制响应性粒度	`markRaw` / `shallowRef` / `shallowReactive`	在需要极致性能的区域，手动控制响应性粒度可以避免不必要的依赖追踪，提高性能。

性能优化的权衡

在使用 shallowRef 和 markRaw 进行性能优化时，我们需要权衡响应性和性能之间的关系。过度地使用这些 API 可能会导致一些问题，例如：

手动更新： 如果数据没有被转换为响应式数据，那么当数据发生变化时，我们需要手动触发视图更新。
数据不一致： 如果数据没有被转换为响应式数据，那么可能会出现数据不一致的情况。

因此，我们需要根据实际情况，仔细评估使用这些 API 的收益和风险，并选择合适的方案。在大多数情况下，使用 shallowRef 和 markRaw 可以有效地提高性能，但也需要注意潜在的问题。

更多IT精英技术系列讲座，到智猿学院