5.7.4 隐式修改数组长度的原型方法

push / pop / shift / unshift / splice 内部会读取并设置 length，会让副作用函数相互触发直到栈溢出，必须屏蔽这类「读取」。

一、问题复现

const arr = reactive([])

effect(() => { arr.push(1) })
effect(() => { arr.push(1) }) // 栈溢出：Maximum call stack size exceeded

二、成因

以 push 为例（规范 23.1.3.20 节），它既读取也设置数组的 length：

  1. 第一个副作用函数执行，push 间接读取 length → 与该 length 建立响应联系；
  2. 第二个副作用函数执行，同样与 length 建立联系，而 push 又间接设置 length；
  3. 设置 length 触发与 length 关联所有副作用函数，其中包含第一个副作用函数 → 它再次执行并再次设置 length；
  4. 如此往复，最终调用栈溢出。

三、解决：用 shouldTrack 屏蔽追踪

问题的关键是 push 间接读取了 length。只要在调用原型方法期间「禁止追踪」，就不会建立响应联系：

let shouldTrack = true // 默认允许追踪

function track(target, key) {
  // 禁止追踪时直接返回
  if (!activeEffect || !shouldTrack) return
  // ...
}

重写这些方法，在调用原始方法前后切换开关：

['push', 'pop', 'shift', 'unshift', 'splice'].forEach(method => {
  const originMethod = Array.prototype[method]
  arrayInstrumentations[method] = function (...args) {
    shouldTrack = false              // 调用原始方法之前，禁止追踪
    const res = originMethod.apply(this, args)
    shouldTrack = true               // 调用之后恢复追踪
    return res
  }
})

这类方法在语义上都是修改操作而非读取操作，所以屏蔽期间的读取不会造成信息丢失，也不会带来其他副作用。

四、小结

方法为什么需要处理
push / unshift添加元素时读取并设置 length
pop / shift删除元素时读取并设置 length
splice增删元素时隐式修改 length

相关

最近更新:
Contributors: liujw