vue3响应式高阶用法，中高级前端必会的性能优化技巧

Vue 3 的响应式系统是前端开发中一个非常重要的特性，它使得数据和视图之间的同步变得非常自然和高效。为了充分利用 Vue 3 的响应式系统并进行性能优化，了解和掌握一些高阶用法是非常必要的。以下是一些中高级前端开发者必须掌握的 Vue 3 响应式高阶用法和性能优化技巧：

1. shallowRef 和 shallowReactive

shallowRef 和 shallowReactive 是 Vue 3 中用于创建浅层响应式引用和对象的 API。它们只对根层次的数据进行响应式处理，而不会对深层对象进行响应式处理。这在处理大型或复杂的数据结构时非常有用，因为它可以减少不必要的性能开销。

• 使用场景：当只需要对对象的根层次进行响应式处理时。
• 示例：

  import { shallowRef, shallowReactive } from 'vue';
  
  const shallowCount = shallowRef({ value: 0 });
  const shallowUser = shallowReactive({ name: 'John', age: 25 });
  ```<a data-index="0" class='citation' href="#citation-2" target="_blank">2</a>
  

2. triggerRef

triggerRef 用于强制执行依赖于 shallowRef 的副作用。这意味着在使用 shallowRef 时，只能修改顶层数据，但特殊情况下可以使用 triggerRef 来强制修改内层属性，从而提高灵活性。

• 代码示例：

  import { shallowRef, triggerRef } from 'vue';
  
  // 假设 data 是一个 shallowRef
  triggerRef(data);
  ```<a data-index="1" class='citation' href="#citation-1" target="_blank">1</a>
  

3. customRef

customRef 允许你创建一个自定义的 ref，可以控制它的依赖追踪和通知更新。这在需要自定义 ref 行为时非常有用，例如在 get 和 set 时执行特定逻辑。

• 使用场景：需要自定义的 ref 行为。
• 示例：

  import { customRef } from 'vue';
  
  const customRefExample = customRef((track, trigger) => {
    return {
      get() {
        track(); // 依赖追踪
        return this.value;
      },
      set(value) {
        this.value = value;
        trigger(); // 触发更新
      }
    };
  });
  ```<a data-index="2" class='citation' href="#citation-2" target="_blank">2</a>
  

4. toRaw 和 markRaw

toRaw 和 markRaw 是 Vue 3 中用于处理原始值和标记为非响应式对象的 API。toRaw 用于获取一个响应式对象的原始值，而 markRaw 用于标记一个对象为非响应式，这样 Vue 就不会对其进行响应式处理。

• 使用场景：需要避免对某些对象进行响应式处理时。
• 示例：

  import { toRaw, markRaw } from 'vue';
  
  const raw = toRaw(reactiveObject);
  const nonReactive = markRaw(someObject);
  ```<a data-index="3" class='citation' href="#citation-1" target="_blank">1</a>
  

5. shallowReadonly

shallowReadonly 是 Vue 3 中用于创建一个只读的浅层响应式引用的 API。它类似于 shallowRef，但返回的对象是只读的，不能被修改。

• 使用场景：需要创建一个只读的响应式引用时。
• 示例：

  import { shallowReadonly } from 'vue';
  
  const readonlyData = shallowReadonly({ name: 'John', age: 25 });
  ```<a data-index="4" class='citation' href="#citation-1" target="_blank">1</a>
  

6. 避免深度响应式

在 Vue 3 中，通过使用 shallowRef 和 shallowReactive 可以绕开深度响应式，这在处理大型数据结构时可以显著提高性能。

• 示例：

  import { shallowRef } from 'vue';
  
  const data = shallowRef({ name: 'John', age: 25 });
  // 修改顶层引用会触发响应式更新
  data.value = { name: 'Bob', age: 30 };
  // 修改内部属性不会触发响应式更新
  data.value.age = 35;
  ```<a data-index="5" class='citation' href="#citation-8" target="_blank">8</a>
  

通过掌握这些高阶用法，你可以更有效地利用 Vue 3 的响应式系统，从而提高应用的性能和可维护性。128

如何在Vue3中使用shallowReactive来优化性能?

在Vue3中，shallowReactive是一种响应式API，它与reactive不同，仅对对象的最外层属性进行响应式处理，而忽略对象中的嵌套属性的响应式更新。这种特性使得shallowReactive在处理大型数据集或嵌套对象时，可以提高性能，避免不必要的响应式转换和更新。例如，如果只有对象的顶层属性需要响应式更新，使用shallowReactive可以减少Vue对深层数据的响应式处理，从而提升性能。"shallowReactive会忽略对象中的嵌套属性的响应式更新，只有对象的直接属性是响应式的"16。

triggerRef函数在Vue3响应式系统中有什么作用?

triggerRef函数在Vue3的响应式系统中扮演着重要角色，它允许开发者手动触发响应式更新。这在某些特定情况下非常有用，比如当使用shallowRef创建的响应式引用需要更新其内部属性时。由于shallowRef不跟踪内部属性的变化，使用triggerRef可以强制执行依赖于shallowRef的副作用，从而确保视图的更新与数据的变更保持同步。"特殊情况使用 triggerRef可以强制修改内层属性，大大提高灵活性"2。

什么是customRef，它在Vue3中如何使用?

customRef是Vue3中一个强大的API，它允许开发者创建自定义的响应式引用，并对其依赖追踪和更新通知进行显式的控制。使用customRef，开发者可以封装特定的逻辑，以满足特定的业务需求。例如，可以在get和set访问器中执行特定的操作，或者在数据变化时执行自定义的副作用。"customRef 允许你创建一个自定义的 ref，可以控制它的依赖追踪和通知更新"2。使用customRef时，需要提供一个工厂函数，该函数接收track和trigger两个函数作为参数，并返回一个具有get和set方法的对象。

Vue3中的toRaw和markRaw函数有什么用途?

toRaw和markRaw是Vue3中用于控制响应性的两个函数。toRaw函数可以将响应式对象转换为普通的原生对象，这在需要访问原始数据而不想触发响应式更新时非常有用。相对的，markRaw函数可以将一个对象标记为非响应式的，即使这个对象被包含在响应式对象中，它也不会变成响应式的。这两个函数提供了在需要时绕过代理或禁用响应性的能力，有助于提高性能和更好地控制应用的行为。"toRaw 就是把一个响应式对象转化为普通对象. markRaw 就是把某个数据，标记为普通对象，当我们把它放到响应式对象中，也依然是非响应式的"38。

在Vue3中，如何判断是否需要使用shallowRef而不是ref?

在Vue3中，选择使用shallowRef而不是ref主要取决于是否只需要对数据的顶层进行响应式处理。如果数据结构复杂，但只有顶层的数据需要响应式更新，使用shallowRef可以避免对整个数据结构进行深度的响应式处理，从而提高性能。"shallowRef 创建一个只对根层次的数据进行响应式处理的引用"2。此外，当处理大型数据集或嵌套对象时，使用shallowRef可以减少不必要的响应式转换和更新，进一步提升性能。因此，在评估是否使用shallowRef时，应考虑数据的使用场景和性能需求。