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

1. Vue3响应式系统高阶用法

1.1 shallowRef()

shallowRef 是 Vue 3 中 ref 的浅层作用形式，它允许我们创建一个只对其顶层属性具有响应性的引用。与 ref 不同，shallowRef 的内部值将会原样存储和暴露，只有对 .value 的访问是响应式的。这在处理大型数据结构时非常有用，因为它减少了不必要的响应式开销。

1.1.1 使用场景

• 当需要对大型数据结构进行性能优化时，使用 shallowRef 可以避免深层嵌套数据的响应式转换，从而提高性能。
• 在与外部状态管理系统集成时，shallowRef 可以用来保持数据结构的原始性，同时只对顶层属性提供响应式支持。

1.1.2 实现示例

const state = shallowRef({
    count: 1 });

// 修改顶层引用会触发响应式更新
state.value = {
    count: 2 };

// 修改内部属性不会触发响应式更新
state.value.count = 3;

1.2 triggerRef()

triggerRef 用于强制触发依赖于 shallowRef 的副作用。这在使用 shallowRef 时，对内部值进行深度变更后非常有用，因为它可以手动触发更新。

1.2.1 使用场景

• 当使用 shallowRef 并且需要手动控制内部属性变更时的响应式更新。

1.2.2 实现示例

const shallow = shallowRef({
   
  greet: 'Hello, world'
});

watchEffect(() => {
   
  console.log(shallow.value.greet);
});

// 变更不会触发副作用
shallow.value.greet = 'Hello, universe';