Vue.js 响应式系统中如何处理数组长度变化引发的更新-Vue.js-PHP中文网

vue.js 不响应数组 length 属性的直接修改，因 length 非响应式；应使用 push、splice 等变异方法间接改变长度以触发更新，或通过 reactive 数组（vue 3）或深度监听/计算属性等方式处理。

vue.js 响应式系统中如何处理数组长度变化引发的更新

Vue.js 的响应式系统不会自动响应数组 length 属性的直接修改，比如 arr.length = 0 或 arr.length = 5。这不是 Vue 的疏漏，而是 JavaScript 原生行为与响应式机制共同决定的限制。

关键点在于：
length 是数组的一个可写但非响应式属性。它不触发 getter/setter（Vue 2）或 Proxy 的 set trap（Vue 3），除非被显式劫持。

用变异方法间接改变 length
所有 Vue 封装的 7 个数组变异方法（push、pop、shift、unshift、splice、sort、reverse）在执行时，不仅修改内容，还会同步更新 length，并主动通知依赖更新。
例如：
```
this.list.splice(0)      // 清空 → length 变为 0，视图响应
this.list.push(item)     // length +1，触发更新
this.list.pop()          // length -1，触发更新
```
Vue 2 中对 length 单独 defineProperty 补漏
初始化响应式数组时，Vue 2 会额外对 length 属性调用 Object.defineProperty，将其设为 setter，一旦赋值就手动触发更新。
⚠️ 但仅限于 data 中声明的原始响应式数组；通过 new Array() 或 [] 动态创建的普通数组不享受此补漏。
Vue 3 中 Proxy 天然捕获 length 赋值（需目标为 reactive 数组）
reactive([1,2,3]) 创建的数组，其 length 属性的写操作会被 Proxy 的 set trap 捕获，并触发依赖通知。
✅ 支持：arr.length = 0
❌ 不支持：对 ref([]) 直接赋值 arr.value.length = 0（ref 内部是 .value 包裹，length 在原始数组上，未被 Proxy 层覆盖）

this.list.length = 0
→ Vue 2：完全无反应（除非该数组是 data 中初始化的，且 Vue 2 已对其 length 补漏）
→ Vue 3（ref）：无效；reactive 数组则有效（但官方仍不推荐，因语义不清、易混淆）
this.list = []
→ 视图会更新（因为替换了整个响应式引用），但会丢失原数组 identity，导致 <li v-for> 的 key 复用失效、input 失焦、滚动位置重置等问题。

不能 watch: { 'list.length': ... } —— length 本身不是响应式字段。

推荐做法：

下载

深度监听数组本身（最常用）

watch(() => this.list, (newVal, oldVal) => {
  console.log('长度从', oldVal?.length, '变为', newVal.length)
}, { deep: true })

用 computed 抽象 length，再监听

computed: {
  listLength() { return this.list.length }
},
watch: {
  listLength(newLen, oldLen) {
    if (newLen !== oldLen) { /* 长度变了 */ }
  }
}

手动维护一个响应式 length 字段（适合高频精确控制）
每次调用 push/splice 后同步更新 this.listLength = this.list.length，然后监听该字段。