《Vue.js设计与实现》5.4 合理的触发响应

[jizai1125]

看源码时多了一种数组场景下的判断：不影响数组长度变化但是会触发副作用函数重新执行

const observed = reactive(new Array(3))
effect(() => {
  console.log(observed.length)
})
// 下面用例不会影响数组长度变化，不应该触发副作用函数重新执行
observed.x = 'x' // 非索引属性
observed[-1] = 'x'  // 负索引
observed[1] = 1  // 已存在索引

PR: fix(reactivity): add existing index or non-integer prop on Array should not trigger length dependency

源码

function createSetter(shallow = false) {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    let oldValue = (target as any)[key]
   // 省略代码...
   
    const hadKey =
     // 新增判断
      isArray(target) && isIntegerKey(key)
        ? Number(key) < target.length
        : 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, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}