探讨 Vue 3 响应式系统中，数组的 `Proxy` 拦截如何处理 `length` 属性的变化，以及它对相关副作用的影响。

各位靓仔靓女，今天咱们来聊聊 Vue 3 响应式系统里，数组这块儿的“变脸”戏法。特别是那个神秘的 length 属性，它一变化，就好像按下了一个按钮，牵一发动全身。咱们要做的，就是把这个按钮背后的机制给扒个精光。

开场白：数组，不止是数据的集合

别把数组当成傻乎乎的“数据罐头”，在 Vue 3 的响应式世界里，它可是一位“戏精”。它的每一个动作，每一个变化，都牵动着 Vue 3 响应式系统的神经。我们今天要深入了解的就是，当这个“戏精”的 length 属性发生改变时，Vue 3 是如何“监视”它，并“通知”那些对它感兴趣的“观众”（也就是相关的副作用）。

第一幕：Proxy 上场，拦截一切

Vue 3 使用 Proxy 来拦截数组的各种操作，包括读取、写入、删除等等。对于 length 属性，Proxy 当然也不会放过。

const target = [1, 2, 3];
const handler = {
  get(target, key, receiver) {
    // 这里处理读取操作
    console.log(`读取属性：${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    // 这里处理写入操作
    console.log(`设置属性：${key} 为 ${value}`);
    return Reflect.set(target, key, value, receiver);
  }
};

const proxy = new Proxy(target, handler);

proxy.length = 5; // 设置属性：length 为 5
console.log(proxy); // [ 1, 2, 3, <2 empty items> ]

在上面的例子中，我们创建了一个数组的 Proxy，并定义了 get 和 set 拦截器。当我们设置 proxy.length 时，set 拦截器会被触发，我们可以看到控制台输出了 设置属性：length 为 5。

第二幕： length 的“特殊身份”

length 属性可不一般，它和其他属性不一样。改变 length 可能会导致以下几种情况：

截断数组： 如果 length 变小，数组后面的元素会被删除。
扩展数组： 如果 length 变大，数组会增加新的空位。

这两种情况都会影响数组的内容，因此 Vue 3 必须特别小心地处理 length 的变化。

第三幕：依赖收集与触发

Vue 3 响应式系统的核心是依赖收集和触发。当组件渲染时，会读取响应式数据，并将组件的渲染函数（或计算属性的 getter 函数）作为依赖收集起来。当响应式数据发生变化时，会触发这些依赖，让组件重新渲染。

那么，对于数组的 length 属性，Vue 3 是如何进行依赖收集和触发的呢？

依赖收集： 当组件渲染时，如果访问了数组的 length 属性，Vue 3 会将该组件的渲染函数（或计算属性的 getter 函数）作为依赖收集起来。
触发： 当 length 属性发生变化时，Vue 3 会遍历所有依赖，并触发它们，让组件重新渲染。

让我们来看一个例子：

<template>
  <div>
    <p>数组长度：{{ list.length }}</p>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <button @click="shortenList">截断数组</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const list = ref([1, 2, 3]);

    const shortenList = () => {
      list.value.length = 1;
    };

    return {
      list,
      shortenList
    };
  }
};
</script>

在这个例子中，组件渲染时会访问 list.length 属性，因此组件的渲染函数会被作为 length 属性的依赖收集起来。当我们点击“截断数组”按钮时，list.length 属性会被设置为 1，Vue 3 会触发组件的重新渲染，数组的长度和列表内容都会更新。

第四幕：源码解析，深入虎穴

为了更深入地了解 Vue 3 如何处理数组 length 的变化，让我们来扒一扒 Vue 3 的源码（简化版，只关注核心逻辑）：

// packages/reactivity/src/reactive.ts

function createReactiveObject(
  target: Raw,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>
): any {
  // ... 省略部分代码

  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  return proxy
}

// packages/reactivity/src/baseHandlers.ts

const mutableHandlers: ProxyHandler<object> = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
}

const collectionHandlers: ProxyHandler<CollectionTypes> = {
  get: createGetter(),
  set: createSetter(),
  deleteProperty: createDeleter(),
  has: createHas(),
  ownKeys: createOwnKeys()
}

function createGetter(isReadonly = false, shallow = false) {
  return function get(target: Target, key: string | symbol, receiver: object) {
    // ... 省略部分代码

    track(target, OperationTypes.GET, key)
    return res
  }
}

function createSetter(shallow = false) {
  return function set(
    target: object,
    key: string | symbol,
    value: any,
    receiver: object
  ): boolean {
    let oldValue = (target as any)[key]
    if (!isShallow && isRef(value) && !isReadonly) {
      value = value.value
    }

    if (isReadonly && (__DEV__ ? !readonlySet.has(key) : true)) {
      __DEV__ &&
        warn(
          `Set operation on key "${String(key)}" failed: target is readonly.`,
          target
        )
      return true
    }

    const hadKey = hasOwn(target, key)
    const result = Reflect.set(target, key, value, receiver)

    // don't trigger if target is something up in the prototype chain of original
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        trigger(target, OperationTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, OperationTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

createReactiveObject 函数负责创建响应式对象，它会根据目标对象的类型选择不同的 ProxyHandler。
mutableHandlers 和 collectionHandlers 分别是普通对象和集合类型的 ProxyHandler。数组被认为是集合类型，因此会使用 collectionHandlers。
createGetter 和 createSetter 函数分别创建 get 和 set 拦截器。
在 get 拦截器中，会调用 track 函数进行依赖收集。
在 set 拦截器中，会调用 trigger 函数触发依赖。

关键在于 trigger 函数，它会根据操作类型（ADD、SET 等）和键名，找到所有相关的依赖，并触发它们。

对于数组的 length 属性，当它发生变化时，trigger 函数会被调用，并且操作类型会被设置为 SET。这样，所有依赖于 length 属性的组件都会被重新渲染。

第五幕：length 变化的特殊处理

Vue 3 对 length 的处理，不仅仅是简单的 SET 操作。它还考虑了 length 变化对数组元素的影响。

当 length 变小时，Vue 3 会删除多余的元素，并触发这些元素的依赖。当 length 变大时，Vue 3 会添加新的空位，并触发 length 属性的依赖。

这种精细的处理，保证了 Vue 3 响应式系统的正确性和效率。

第六幕：一些思考和注意事项

避免直接操作 length： 虽然可以直接修改 length 属性来改变数组的长度，但这样做可能会导致一些意想不到的问题。建议使用 push、pop、splice 等方法来操作数组，这些方法会自动触发响应式更新。
深层响应式： Vue 3 默认只对数组的第一层进行响应式处理。如果数组的元素是对象，那么需要使用 reactive 函数将这些对象转换为响应式对象。
大型数组的性能优化： 对于大型数组，频繁的 length 变化可能会导致性能问题。可以考虑使用 shallowRef 或 shallowReactive 来避免不必要的响应式更新。

第七幕：总结

今天，我们深入探讨了 Vue 3 响应式系统中，数组的 length 属性的处理机制。我们了解了 Proxy 如何拦截 length 的变化，依赖收集和触发的原理，以及 Vue 3 如何精细地处理 length 变化对数组元素的影响。

希望今天的分享能够帮助大家更好地理解 Vue 3 的响应式系统，并在实际开发中写出更高效、更健壮的代码。

结尾：彩蛋

记住，掌握响应式系统的核心，就相当于掌握了 Vue 3 的“灵魂”。以后遇到任何响应式问题，都可以从依赖收集和触发的角度去思考，相信你一定能找到答案。

就这样，咱们下期再见！祝大家代码无 Bug，头发浓密！

发表回复 取消回复

发表回复取消回复