Vue `shallowRef`与`customRef`的实现：手动控制依赖追踪与性能开销对比 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue `shallowRef` 与 `customRef` 实现：手动控制依赖追踪与性能开销对比

各位朋友，大家好！今天我们来深入探讨 Vue 3 中两个重要的响应式 API：shallowRef 和 customRef。它们都允许我们在一定程度上控制 Vue 的响应式系统，但实现原理和适用场景却有所不同。我们将从实现原理、使用方式、性能开销等方面进行对比分析，帮助大家更好地理解和运用它们。

一、`shallowRef`：浅层响应式引用

1.1 实现原理

shallowRef 的核心思想是：只对最外层的值进行响应式追踪，而不对内部的属性进行递归观测。这意味着，当我们改变 shallowRef 存储对象的属性时，Vue 不会触发更新。

在 Vue 的内部实现中，shallowRef 类似于一个普通的 ref，但它使用了一个特殊的 shallowReactive 函数来处理其存储的值。shallowReactive 会创建一个代理对象，但只对第一层属性进行响应式处理。

让我们通过一个简化的 JavaScript 代码来理解 shallowRef 的实现：

function shallowReactive(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj; // 非对象直接返回
  }

  const proxy = new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key); // 追踪依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key); // 触发更新
      }
      return result;
    }
  });

  return proxy;
}

function shallowRef(value) {
  let _value = shallowReactive(value); // 使用 shallowReactive 包裹
  let _rawValue = value;

  const ref = {
    get value() {
      track(ref, 'value');
      return _value;
    },
    set value(newValue) {
      _rawValue = newValue;
      _value = shallowReactive(newValue);
      trigger(ref, 'value');
    }
  };

  return ref;
}

// 简化的依赖追踪和触发函数
let activeEffect = null;
const targetMap = new WeakMap();

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }
    let deps = depsMap.get(key);
    if (!deps) {
      deps = new Set();
      depsMap.set(key, deps);
    }
    deps.add(activeEffect);
  }
}

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

function effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}

// 示例
const state = shallowRef({
  count: 0,
  nested: { value: 1 }
});

effect(() => {
  console.log("state.value.count:", state.value.count);
});

state.value.count = 1; // 触发更新，输出 "state.value.count: 1"
state.value.nested.value = 2; // 不触发更新
console.log("state.value.nested.value:", state.value.nested.value); // 输出 "state.value.nested.value: 2"
state.value = { count: 2, nested: { value: 3 } }; // 触发更新，输出 "state.value.count: 2"
console.log("state.value.nested.value:", state.value.nested.value); // 输出 "state.value.nested.value: 3"

在这个例子中，我们定义了一个 shallowRef 函数，它使用 shallowReactive 来创建代理对象。当 state.value.count 改变时，由于 shallowRef 追踪了 state.value 的变化，所以 effect 函数会重新执行。但是，当 state.value.nested.value 改变时，由于 shallowReactive 只对第一层属性进行响应式处理，所以 effect 函数不会重新执行。

1.2 使用场景

shallowRef 适用于以下场景：

大型数据结构，只有最外层需要响应式： 当你有一个包含大量数据的对象，但只需要对最外层对象的变化做出响应时，使用 shallowRef 可以避免对所有属性进行深度观测，从而提高性能。
外部库管理的状态： 当你使用一些外部库来管理状态，并且这些库已经实现了自己的更新机制时，可以使用 shallowRef 来包装这些状态，避免 Vue 的响应式系统干扰外部库的更新。
只读数据： 如果你希望创建一个只读的数据对象，可以使用 shallowRef 来包装它。虽然 shallowRef 本身不是只读的，但你可以通过其他方式来阻止对内部属性的修改。

1.3 性能开销

shallowRef 的性能开销相对较低，因为它只对最外层的值进行响应式追踪。相比于 ref，它可以避免对内部属性进行深度观测，从而减少内存占用和计算量。

特性	`ref`	`shallowRef`
深度观测	深度响应式	浅层响应式
内存占用	较高	较低
计算量	较高	较低
适用场景	需要深度响应式的场景	大型数据结构，外部库管理状态
更新触发	内部属性改变会触发更新	只有外层值改变才会触发更新

二、`customRef`：自定义依赖追踪

2.1 实现原理

customRef 提供了一个更灵活的方式来控制依赖追踪和更新时机。它允许你自定义 get 和 set 函数，从而完全控制响应式行为。

customRef 接受一个工厂函数作为参数，该工厂函数接收 track 和 trigger 两个函数作为参数。track 函数用于追踪依赖，trigger 函数用于触发更新。

让我们通过一个简化的 JavaScript 代码来理解 customRef 的实现：

function customRef(factory) {
  let value;
  let track, trigger;

  const ref = {
    get value() {
      track(); // 调用传入的 track 函数
      return value;
    },
    set value(newValue) {
      value = newValue;
      trigger(); // 调用传入的 trigger 函数
    }
  };

  ({ track, trigger } = factory(
    () => track(ref, 'value'),
    () => trigger(ref, 'value')
  ));

  return ref;
}

// 简化的依赖追踪和触发函数 (与 shallowRef 示例相同)
let activeEffect = null;
const targetMap = new WeakMap();

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }
    let deps = depsMap.get(key);
    if (!deps) {
      deps = new Set();
      depsMap.set(key, deps);
    }
    deps.add(activeEffect);
  }
}

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

function effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}

// 示例：防抖 ref
function useDebouncedRef(value, delay) {
  let timeout;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newValue) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          value = newValue;
          trigger();
        }, delay);
      }
    };
  });
}

// 使用示例
const debouncedValue = useDebouncedRef(0, 500);

effect(() => {
  console.log("debouncedValue:", debouncedValue.value);
});

debouncedValue.value = 1;
debouncedValue.value = 2;
debouncedValue.value = 3; // 只会在 500ms 后输出 "debouncedValue: 3"

在这个例子中，我们定义了一个 useDebouncedRef 函数，它使用 customRef 来创建一个防抖的 ref。当我们多次设置 debouncedValue.value 时，只有最后一次设置会在 delay 毫秒后触发更新。

2.2 使用场景

customRef 适用于以下场景：

自定义依赖追踪逻辑： 当你需要完全控制依赖追踪和更新时机时，可以使用 customRef。例如，你可以实现防抖、节流等功能。
与第三方库集成： 当你需要将 Vue 的响应式系统与第三方库集成时，可以使用 customRef 来自定义 get 和 set 函数，从而实现无缝集成。
优化性能： 在某些情况下，你可以使用 customRef 来优化性能。例如，你可以只在特定条件下才触发更新。

2.3 性能开销

customRef 的性能开销取决于你的实现逻辑。如果你在 get 和 set 函数中执行了大量的计算，那么性能开销可能会很高。但是，如果你只是简单地追踪依赖和触发更新，那么性能开销与 ref 类似。

特性	`ref`	`customRef`
依赖追踪	自动追踪	自定义追踪
更新时机	自动更新	自定义更新
灵活性	较低	较高
性能开销	较低	取决于实现逻辑
适用场景	常规响应式需求	自定义依赖追踪，第三方库集成

三、`shallowRef` vs `customRef`：对比分析

特性	`shallowRef`	`customRef`
依赖追踪	浅层响应式	完全自定义
灵活性	中等	非常高
性能开销	较低	取决于实现逻辑
适用场景	大型数据结构，外部库管理状态	自定义依赖追踪，第三方库集成
学习成本	较低	较高
代码复杂度	较低	较高

选择建议:

如果只需要浅层响应式，shallowRef 是一个简单高效的选择。
如果需要完全控制依赖追踪和更新时机，customRef 提供了更大的灵活性。
在选择时，需要权衡灵活性、性能开销和代码复杂度。

四、代码示例：更复杂的使用场景

4.1 使用 `shallowRef` 优化大型列表渲染

假设我们有一个大型列表，列表中的每个元素都有很多属性，但我们只需要对列表本身的增删改做出响应，而不需要对每个元素的属性变化做出响应。在这种情况下，我们可以使用 shallowRef 来包装列表，从而避免对所有元素的属性进行深度观测。

<template>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
  <button @click="addItem">Add Item</button>
</template>

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

const list = shallowRef([
  { id: 1, name: 'Item 1', details: { ... } },
  { id: 2, name: 'Item 2', details: { ... } },
  // ... 更多 item
]);

const addItem = () => {
  list.value = [...list.value, { id: Date.now(), name: 'New Item', details: { ... } }];
};
</script>

在这个例子中，我们使用 shallowRef 来包装 list。当我们点击 "Add Item" 按钮时，list.value 会被更新，Vue 会重新渲染列表。但是，如果我们在某个元素的 details 属性中修改了值，Vue 不会触发更新，因为 shallowRef 只对 list.value 的变化做出响应。

4.2 使用 `customRef` 实现本地存储同步

我们可以使用 customRef 来创建一个 ref，它可以自动将值同步到本地存储。

import { customRef } from 'vue';

function useLocalStorageRef(key, initialValue) {
  const storedValue = localStorage.getItem(key);
  const value = storedValue ? JSON.parse(storedValue) : initialValue;

  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newValue) {
        localStorage.setItem(key, JSON.stringify(newValue));
        value = newValue;
        trigger();
      }
    };
  });
}

// 使用示例
const count = useLocalStorageRef('count', 0);

// count.value 的变化会自动同步到 localStorage

在这个例子中，我们使用 customRef 来创建一个 useLocalStorageRef 函数。当我们设置 count.value 时，localStorage 会被更新，并且 Vue 会触发更新。

五、总结：合理选择，优化应用

shallowRef 和 customRef 都是强大的响应式 API，它们允许我们在一定程度上控制 Vue 的响应式系统。shallowRef 适用于大型数据结构和外部库管理的状态，而 customRef 适用于自定义依赖追踪和与第三方库集成。在选择时，我们需要权衡灵活性、性能开销和代码复杂度，从而选择最适合我们需求的 API。正确使用它们可以帮助我们编写更高效、更灵活的 Vue 应用。

希望今天的分享对大家有所帮助！谢谢！

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

Vue shallowRef 与 customRef 实现：手动控制依赖追踪与性能开销对比

一、shallowRef：浅层响应式引用