发布于 由admin

Vue 3实现自定义集合（Map/Set）的响应性：Proxy的Iterable Trap与Key-Value的精确追踪

Vue 3 实现自定义集合（Map/Set）的响应性：Proxy的Iterable Trap与Key-Value的精确追踪

大家好，今天我们来深入探讨一个在 Vue 3 响应式系统中非常有趣且实用的主题：如何使自定义的集合类型，比如 Map 和 Set，具备响应性。我们会使用 Proxy 的特性，特别是其 Iterable Trap，以及针对 Key-Value 结构的精确追踪策略来实现这个目标。

响应式系统与数据代理

在 Vue 3 中，响应式系统是核心组成部分，它允许我们在数据发生变化时，自动更新视图。这个过程依赖于 JavaScript 的 Proxy 对象。Proxy 允许我们拦截对一个对象的基本操作，例如读取属性、设置属性、删除属性等。

简单来说，当我们访问一个响应式对象的属性时，Vue 会记录这个访问行为，并将当前组件或计算属性与这个属性建立依赖关系。当这个属性的值发生变化时，Vue 会通知所有依赖于这个属性的组件或计算属性进行更新。

对于普通对象，这个过程相对简单，只需要拦截 get 和 set 操作即可。但是，对于集合类型，情况变得复杂一些。因为集合类型不仅涉及到 Key-Value 的存储，还涉及到迭代、删除、添加等操作。

集合类型响应性的挑战

传统的 get 和 set 拦截对于集合类型来说是不够的。考虑以下情况：

  1. 迭代： 如果我们只拦截 get 和 set，那么当我们在模板中使用 v-for 迭代 Map 或 Set 时，Vue 无法追踪到迭代过程中访问的元素，也就无法在集合内容发生变化时触发更新。
  2. 添加和删除： Map.set() 和 Set.add() 操作不会触发 set 拦截器。同样，Map.delete() 和 Set.delete() 操作也不会触发 deleteProperty 拦截器。
  3. size 属性： Map.size 和 Set.size 是动态计算的，直接读取无法追踪依赖。
  4. 原型方法： Map 和 Set 的原型方法（如 forEach, values, keys, entries）也需要特殊处理，以确保迭代过程的响应性。

Proxy 的 Iterable Trap 与自定义迭代器

为了解决迭代的问题，我们需要使用 Proxy 的 Iterable Trap。Iterable Trap 是指当我们尝试迭代一个 Proxy 对象时，会触发的拦截器。在 ES6 中，迭代是通过 Symbol.iterator 这个 symbol 属性来实现的。

我们可以通过定义一个自定义的迭代器，并在 Iterable Trap 中返回这个迭代器，来控制迭代过程。在自定义迭代器中，我们可以追踪每一次迭代访问的元素，并建立依赖关系。

function createIterableTrap(target, collectionType) {
  return function() {
    const iterator = target[Symbol.iterator](); // 获取原始迭代器
    const reactiveIterator = {
      next() {
        const { value, done } = iterator.next();
        if (!done) {
          // 追踪依赖
          track(target, value); // value 是 Map 的 [key, value] 对，或者 Set 的 value
        }
        return { value, done };
      },
      [Symbol.iterator]() {
        return this; // 使 reactiveIterator 自身可迭代
      }
    };
    return reactiveIterator;
  };
}

// track 函数用于建立依赖关系，后面会详细介绍
function track(target, key) {
  // 假设这个函数存在，用于追踪依赖
  // 在 Vue 3 中，这个函数实际上是 effect 的 scheduler
  console.log(`Track: target = ${target}, key = ${key}`);
}

在这个例子中，createIterableTrap 函数接收一个目标对象 target (Map 或 Set) 和集合类型 collectionType 作为参数。它返回一个新的迭代器，这个迭代器在每次迭代时，都会调用 track 函数来建立依赖关系。

Key-Value 的精确追踪

对于 Map 来说，我们需要更精确地追踪 Key-Value 的变化。仅仅追踪迭代是不够的。我们需要拦截 set、delete 和 clear 操作，并在这些操作发生时，通知所有依赖于这个 Key-Value 的组件或计算属性进行更新。

function createReactiveMap(target) {
  const reactiveMap = new Proxy(target, {
    get(target, key, receiver) {
      if (key === 'size') {
        // 追踪 size 属性的依赖
        track(target, 'size');
        return Reflect.get(target, key, receiver);
      } else if (key === Symbol.iterator) {
        return createIterableTrap(target, 'Map');
      } else if (typeof target[key] === 'function') {
        // 处理 Map 的原型方法 (get, set, delete, clear, forEach, keys, values, entries)
        return function(...args) {
          const result = target[key].apply(target, args);

          if (key === 'set') {
            const [mapKey, mapValue] = args;
            trigger(target, mapKey, mapValue); // 触发 mapKey 的依赖更新
          } else if (key === 'delete') {
            const [mapKey] = args;
            trigger(target, mapKey); // 触发 mapKey 的依赖更新
          } else if (key === 'clear') {
            trigger(target, Symbol.iterator); // 触发迭代器的依赖更新
          }

          return result;
        };
      }

      // 追踪依赖
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      // 理论上 Map 不应该直接设置属性，而是使用 set 方法
      console.warn('Directly setting properties on a reactive Map is not recommended. Use Map.set() instead.');
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key, value); // 触发 key 的依赖更新
      return result;
    },
    deleteProperty(target, key) {
      // 理论上 Map 不应该直接删除属性，而是使用 delete 方法
      console.warn('Directly deleting properties on a reactive Map is not recommended. Use Map.delete() instead.');
      const result = Reflect.deleteProperty(target, key);
      trigger(target, key); // 触发 key 的依赖更新
      return result;
    }
  });

  return reactiveMap;
}

// trigger 函数用于触发依赖更新，后面会详细介绍
function trigger(target, key, newValue) {
  // 假设这个函数存在，用于触发更新
  // 在 Vue 3 中，这个函数会调用 effect 的 scheduler
  console.log(`Trigger: target = ${target}, key = ${key}, newValue = ${newValue}`);
}

const myMap = createReactiveMap(new Map());

myMap.set('name', 'Alice'); // Trigger: target = [object Map], key = name, newValue = Alice
console.log(myMap.get('name')); // Track: target = [object Map], key = name
myMap.delete('name'); // Trigger: target = [object Map], key = name
console.log(myMap.size); // Track: target = [object Map], key = size
myMap.clear(); // Trigger: target = [object Map], key = Symbol(Symbol.iterator)

for (const [key, value] of myMap) {
  console.log(key, value); // Track: target = [object Map], key = [key,value] (迭代器内部)
}

在这个例子中，我们拦截了 get、set 和 deleteProperty 操作。

  • 在 get 拦截器中，我们特殊处理了 size 属性和 Map 的原型方法。对于 size 属性，我们直接追踪它的依赖。对于原型方法，我们通过包装这些方法，在方法执行前后触发依赖更新。
  • 在 set 和 deleteProperty 拦截器中，我们触发了对应 Key 的依赖更新。

Set 的响应性实现

Set 的响应性实现与 Map 类似，但 simpler 一些，因为它只存储 Value，没有 Key。

function createReactiveSet(target) {
  const reactiveSet = new Proxy(target, {
    get(target, key, receiver) {
      if (key === 'size') {
        // 追踪 size 属性的依赖
        track(target, 'size');
        return Reflect.get(target, key, receiver);
      } else if (key === Symbol.iterator) {
        return createIterableTrap(target, 'Set');
      } else if (typeof target[key] === 'function') {
        // 处理 Set 的原型方法 (add, delete, clear, forEach, values, keys, entries)
        return function(...args) {
          const result = target[key].apply(target, args);

          if (key === 'add') {
            const [setValue] = args;
            trigger(target, setValue, setValue); // 触发 setValue 的依赖更新
          } else if (key === 'delete') {
            const [setValue] = args;
            trigger(target, setValue); // 触发 setValue 的依赖更新
          } else if (key === 'clear') {
            trigger(target, Symbol.iterator); // 触发迭代器的依赖更新
          }

          return result;
        };
      }

      // 追踪依赖
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      // Set 不允许直接设置属性
      console.warn('Directly setting properties on a reactive Set is not allowed.');
      return false;
    },
    deleteProperty(target, key) {
      // Set 不允许直接删除属性
      console.warn('Directly deleting properties on a reactive Set is not allowed. Use Set.delete() instead.');
      return false;
    }
  });

  return reactiveSet;
}

const mySet = createReactiveSet(new Set());

mySet.add('apple'); // Trigger: target = [object Set], key = apple, newValue = apple
mySet.delete('apple'); // Trigger: target = [object Set], key = apple
console.log(mySet.size); // Track: target = [object Set], key = size
mySet.clear(); // Trigger: target = [object Set], key = Symbol(Symbol.iterator)

for (const value of mySet) {
  console.log(value); // Track: target = [object Set], key = value (迭代器内部)
}

track 和 trigger 函数的实现

上面我们使用了 track 和 trigger 函数来建立依赖关系和触发更新。这两个函数是 Vue 3 响应式系统的核心组成部分。

  • track 函数：用于追踪依赖。它接收一个目标对象 target 和一个 Key key 作为参数。它会将当前组件或计算属性与这个 Key 建立依赖关系。这个过程实际上是将当前 effect （即组件的渲染函数或计算属性的 getter 函数）添加到 target 对象的 dep 列表中。

  • trigger 函数：用于触发更新。它接收一个目标对象 target 和一个 Key key 作为参数。它会遍历 target 对象的 dep 列表，并依次执行列表中的 effect。这个过程实际上是通知所有依赖于这个 Key 的组件或计算属性进行更新。

这两个函数的具体实现比较复杂，涉及到 Vue 3 的响应式系统的内部细节。这里我们只给出一个简化的示例：

// 简化的依赖收集和触发更新的实现
const targetMap = new WeakMap(); // 用于存储 target 和 dep 的关系

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 是当前正在执行的 effect (组件的渲染函数或计算属性的 getter 函数)
  if (activeEffect && !dep.has(activeEffect)) {
    dep.add(activeEffect);
  }
}

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

  const dep = depsMap.get(key);
  if (!dep) {
    return;
  }

  dep.forEach(effect => {
    effect(); // 执行 effect，触发更新
  });
}

// activeEffect 在组件渲染或计算属性求值时被设置
let activeEffect = null;

function effect(fn) {
  activeEffect = fn;
  fn(); // 立即执行一次，以便收集依赖
  activeEffect = null;
}

// 示例
const data = { count: 0 };
const reactiveData = new Proxy(data, {
  get(target, key) {
    track(target, key);
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    trigger(target, key);
    return true;
  }
});

effect(() => {
  console.log(`Count is: ${reactiveData.count}`); // 首次执行，输出 "Count is: 0"
});

reactiveData.count++; // 触发更新，输出 "Count is: 1"

这个例子展示了 track 和 trigger 函数的基本原理。在 Vue 3 中，这两个函数的实现更加复杂，涉及到更多的优化和细节处理。

完整代码示例与测试

下面是一个完整的代码示例，展示了如何使用 Proxy 实现 Map 和 Set 的响应性，并进行简单的测试。

// 简化的依赖收集和触发更新的实现
const targetMap = new WeakMap();

let activeEffect = null;

function track(target, key) {
  if (!activeEffect) return;

  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);
  }

  dep.add(activeEffect);
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

  const dep = depsMap.get(key);
  if (!dep) return;

  dep.forEach(effect => {
    effect();
  });
}

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

function createIterableTrap(target, collectionType) {
  return function() {
    const iterator = target[Symbol.iterator]();
    const reactiveIterator = {
      next() {
        const { value, done } = iterator.next();
        if (!done) {
          track(target, value);
        }
        return { value, done };
      },
      [Symbol.iterator]() {
        return this;
      }
    };
    return reactiveIterator;
  };
}

function createReactiveMap(target) {
  const reactiveMap = new Proxy(target, {
    get(target, key, receiver) {
      if (key === 'size') {
        track(target, 'size');
        return Reflect.get(target, key, receiver);
      } else if (key === Symbol.iterator) {
        return createIterableTrap(target, 'Map');
      } else if (typeof target[key] === 'function') {
        return function(...args) {
          const result = target[key].apply(target, args);

          if (key === 'set') {
            const [mapKey, mapValue] = args;
            trigger(target, mapKey, mapValue);
          } else if (key === 'delete') {
            const [mapKey] = args;
            trigger(target, mapKey);
          } else if (key === 'clear') {
            trigger(target, Symbol.iterator);
          }

          return result;
        };
      }

      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.warn('Directly setting properties on a reactive Map is not recommended. Use Map.set() instead.');
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key, value);
      return result;
    },
    deleteProperty(target, key) {
      console.warn('Directly deleting properties on a reactive Map is not recommended. Use Map.delete() instead.');
      const result = Reflect.deleteProperty(target, key);
      trigger(target, key);
      return result;
    }
  });

  return reactiveMap;
}

function createReactiveSet(target) {
  const reactiveSet = new Proxy(target, {
    get(target, key, receiver) {
      if (key === 'size') {
        track(target, 'size');
        return Reflect.get(target, key, receiver);
      } else if (key === Symbol.iterator) {
        return createIterableTrap(target, 'Set');
      } else if (typeof target[key] === 'function') {
        return function(...args) {
          const result = target[key].apply(target, args);

          if (key === 'add') {
            const [setValue] = args;
            trigger(target, setValue, setValue);
          } else if (key === 'delete') {
            const [setValue] = args;
            trigger(target, setValue);
          } else if (key === 'clear') {
            trigger(target, Symbol.iterator);
          }

          return result;
        };
      }

      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.warn('Directly setting properties on a reactive Set is not allowed.');
      return false;
    },
    deleteProperty(target, key) {
      console.warn('Directly deleting properties on a reactive Set is not allowed. Use Set.delete() instead.');
      return false;
    }
  });

  return reactiveSet;
}

// 测试 Map
const myMap = createReactiveMap(new Map());

effect(() => {
  console.log('Map size:', myMap.size);
});

effect(() => {
  console.log('Map entries:');
  for (const [key, value] of myMap) {
    console.log(key, value);
  }
});

myMap.set('name', 'Alice');
myMap.set('age', 30);
myMap.delete('name');
myMap.clear();

// 测试 Set
const mySet = createReactiveSet(new Set());

effect(() => {
  console.log('Set size:', mySet.size);
});

effect(() => {
  console.log('Set values:');
  for (const value of mySet) {
    console.log(value);
  }
});

mySet.add('apple');
mySet.add('banana');
mySet.delete('apple');
mySet.clear();

这个例子展示了如何创建响应式的 Map 和 Set，以及如何使用 effect 函数来监听它们的变化。当你运行这段代码时，你会看到控制台输出相应的日志，表明当 Map 和 Set 的内容发生变化时，effect 函数会被自动执行，从而实现了响应性。

注意事项和优化

  • 性能优化： 在实际应用中，需要对 track 和 trigger 函数进行性能优化，避免不必要的更新。例如，可以采用基于位运算的依赖管理方式，或者使用更加高效的数据结构来存储依赖关系。
  • 深层嵌套： 如果 Map 或 Set 中存储的是对象，那么需要递归地将这些对象也转换为响应式对象，以实现深层嵌套的响应性。
  • 类型安全： 可以使用 TypeScript 来增强代码的类型安全，避免运行时错误。

总结：响应性集合的构建

通过使用 Proxy 的 Iterable Trap 和精确的 Key-Value 追踪策略，我们可以有效地实现自定义集合类型（如 Map 和 Set）的响应性。 理解和掌握这些技术对于构建复杂 Vue 3 应用至关重要，它可以帮助我们更好地管理数据，并提高应用的性能和可维护性。

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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注