为什么ref数组的变化会悄悄发生？

开发Vue3项目时，经常遇到这样的场景：用ref定义了一个数组，想通过watch监听它的变化，但发现数组新增元素、修改元素属性时，watch的回调没反应，这到底是怎么回事？Vue3的watch对ref数组的监听有什么特殊规则？今天咱们就来彻底搞明白这个问题。

要理解watch监听ref数组的问题，得先搞清楚Vue3中ref和数组的关系，咱们都知道，ref用来创建响应式数据，当它包裹基本类型（如数字、字符串）时，会暴露一个value属性，修改value就能触发响应,但如果是数组这种引用类型呢？

ref包裹数组时，数组本身会被处理成响应式对象，不过Vue3的响应式系统是基于“属性访问跟踪”的——简单说，只有明确被访问过的属性变化才会触发更新，比如用arr.value.push(1)修改数组，这时候数组的length属性变了，但默认情况下，watch可能没“看”到这个变化。

举个例子：

import { ref, watch } from 'vue'
const list = ref([])
watch(list, (newVal, oldVal) => {
  console.log('数组变化了') // 这个回调会触发吗？
})
list.value.push('新元素')

运行这段代码，控制台可能不会输出“数组变化了”，因为push操作虽然改变了数组内容，但数组的引用（list.value的内存地址）没变，watch默认只监听引用的变化,所以感知不到这次修改。

watch监听数组的3种常见误区

知道了问题根源,咱们再看看开发中最容易踩的几个坑：

误区1：直接监听ref数组，期待所有操作都触发回调

很多人会像上面的例子那样，直接把ref数组传给watch，以为push、splice等方法会触发回调，但实际上，这些方法只是修改了数组内部元素，没有改变数组的引用,所以watch默认不会响应。

误区2：认为修改数组元素属性会自动触发监听

假设数组里存的是对象，比如list.value = [{ id: 1, name: 'A' }]，这时候修改list.value[0].name = 'B'，watch的回调同样不会触发，因为数组元素的属性变化属于“深层变化”,需要特别处理才能被监听到。

误区3：用错watch的source参数

有人可能会写成watch(() => list, ...)，或者漏掉.value，直接传递ref（如watch(list, ...)）和传递() => list.value效果是一样的，因为watch会自动解包ref，但如果source是数组的某个计算属性（比如长度）,写法又不一样了。

正确监听ref数组的3种方法

知道了问题和误区，接下来就是解决办法，根据不同的使用场景,有3种常用方案：

方法1：使用deep选项开启深度监听

如果需要监听数组内部的所有变化（包括元素增删、元素属性修改），可以给watch添加deep: true选项，这时候，watch会递归遍历数组的所有元素,检测深层变化。

修改之前的例子：

watch(list, (newVal, oldVal) => {
  console.log('数组变化了')
}, { deep: true }) // 添加deep选项
list.value.push('新元素') // 这次会触发回调

这时候，无论是push、pop，还是修改数组里对象的属性，watch都会捕获到变化，不过要注意，深度监听会增加性能开销，尤其是数组很大时,频繁的深层遍历可能影响应用性能。

方法2：监听数组的特定属性（如length）

如果只关心数组长度的变化（比如分页加载时判断是否有更多数据），可以直接监听数组的length属性，这种方法更轻量,性能更好。

示例代码：

watch(
  () => list.value.length, // 监听length属性
  (newLength, oldLength) => {
    console.log(`数组长度从${oldLength}变为${newLength}`)
  }
)
list.value.push('新元素') // 触发回调，输出长度变化

这种方法的好处是只监听特定属性，避免了深层遍历的性能消耗，适合只需要关注数组长度、索引等单一属性变化的场景。

方法3：监听数组的计算属性或派生状态

如果需要根据数组的内容触发特定操作（比如筛选后的列表变化），可以监听一个计算属性，这个计算属性返回数组的派生状态，这样既保证了响应性,又能聚焦具体的变化点。

监听数组中“未完成”的待办事项数量：

import { computed } from 'vue'
const todos = ref([
  { id: 1, done: false },
  { id: 2, done: true }
])
const undoneCount = computed(() => {
  return todos.value.filter(item => !item.done).length
})
watch(undoneCount, (newCount, oldCount) => {
  console.log(`未完成事项从${oldCount}变为${newCount}`)
})
todos.value[0].done = true // 触发undoneCount变化，进而触发watch回调

这种方法的优势在于，通过计算属性将复杂的逻辑封装起来，watch只需要关注最终的派生结果，代码更清晰,性能也更可控。

深度监听的性能优化技巧

虽然deep: true能解决大部分问题，但如果数组很大（比如上百个元素），每次变化都深层遍历可能会导致卡顿,这时候可以试试这些优化方法：

• 限制监听范围：如果只需要监听数组的前10个元素，可以在watch的source中返回list.value.slice(0, 10)，减少需要遍历的元素数量。

• 防抖处理：对频繁触发的watch回调使用防抖（debounce），比如用户快速输入时，等输入暂停后再处理变化。

• 拆分监听逻辑：将大数组拆分成多个小数组，分别监听需要关注的部分，避免一次性处理过多数据。

实际案例：用watch监听待办列表的变化

以一个待办事项列表为例，我们需要在数组变化时将数据同步到本地存储,这时候就需要正确使用watch监听ref数组。

完整代码示例：

import { ref, watch } from 'vue'
export default {
  setup() {
    // 从本地存储读取初始数据
    const todos = ref(JSON.parse(localStorage.getItem('todos') || '[]'))
    // 监听todos的变化，同步到本地存储
    watch(todos, (newTodos) => {
      localStorage.setItem('todos', JSON.stringify(newTodos))
    }, { deep: true }) // 必须开启深度监听，否则修改元素属性不会触发保存
    // 添加待办事项的方法
    const addTodo = (text) => {
      todos.value.push({ id: Date.now(), text, done: false })
    }
    // 切换待办事项状态的方法
    const toggleTodo = (id) => {
      const todo = todos.value.find(item => item.id === id)
      if (todo) todo.done = !todo.done
    }
    return { todos, addTodo, toggleTodo }
  }
}

在这个案例中，由于需要监听数组元素的done属性变化（深层变化），所以必须使用deep: true选项，这样无论是新增待办（修改数组长度）还是切换待办状态（修改对象属性），watch都会触发,确保本地存储及时更新。

掌握这3点，轻松监听ref数组

通过上面的分析，咱们可以总结出监听Vue3 ref数组的核心要点：

1. 理解响应式原理：ref数组的默认监听只关注引用变化，push等操作不会改变引用，所以需要额外处理。

2. 选择合适的监听方式：

• 深层变化用deep: true（如元素属性修改）；

• 单一属性变化监听具体属性（如length）；

• 派生状态监听计算属性（如筛选后的数量）。

3. 注意性能优化：避免对大数组使用无意义的深层监听，通过限制范围、防抖等方法提升性能。

下次遇到watch监听ref数组不触发的问题时，先检查是否需要深层监听，再根据场景选择最合适的方案,就能轻松解决啦！