【Vue3】详细探究 watch ref 数组不生效的问题

结果

不废话，直接上结果：

方法	arr.push	arr.splice	arr[i] = …	arr = …	arr.length = 0
模板	✔️	✔️	✔️	✔️	✔️
watch(arr)	✖️	✖️	✖️	✔️	✖️
watch(arr.value)	✔️	✔️	✔️	✖️	✔️
watch(arr, { deep: true })	✔️	✔️	✔️	✔️	✔️
watch(arr.value.length)	⚠️	⚠️	⚠️	⚠️	⚠️
watch(() => arr.value)	✖️	✖️	✖️	✔️	✖️
watch(() => arr.value.length)	✔️	✔️	✖️	✔️*	✔️*

从结果来看，watch(arr, { deep: true }) 最为保险，与模板行为一致。但是 deep watch 太大的对象可能会影响性能。

你可以根据上面的表格来确定到底用哪一种方法。

说明：

1. ✔️ 表示这一列的操作能触发这一行的 watch，✖️ 同理。
2. ⚠️ 表示报错。
3. 列头上的操作省去了 .value。因为是在模板中执行的代码，不用加 .value。

（* 见下方解释）

解释

1. watch(arr)：监听的是 ref 的值，也就是数组的引用。只有整个数组被替换时才会触发。
2. watch(arr.value)：ref 中的非原始值底层会自动改用 reactive，因此 watch arr.value 相当于 watch 底层的 reactive 对象。当数组被整个替换后，watch 的依旧是原来的数组，而不是新的数组，所以 arr = ... 不会被触发。
3. watch(arr, { deep: true })：相当于 1 和 2 的组合。
4. watch(arr.value.length)：arr.value.length 是个数字，不是 ref 对象、reactive 对象或者 getter 函数，因此这段代码根本无法执行。
5. watch(() => arr.value)：和 1 是一样的。这点在 Vue3 文档中也有提及。
6. watch(() => arr.value.length)：4 的正确书写版。因为 watch 的是 arr 的长度，不管 arr 发生了什么，只要长度变了就会触发。测试中的 arr = ... 恰好新旧数组长度不一致，所以可以触发。

测试代码

<script setup>
import { ref, watch } from 'vue'

const counter = ref(0);

const arr = ref([]);
const _watch = ref([]);
const _watchValue = ref([]);
const _watchDeep = ref([]);
const _watchLength = ref('[Vue warn]: Invalid watch source:  0 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. ');
const _watchGetter = ref([]);
const _watchGetterLength = ref([]);   

watch(arr, () => _watch.value = [...arr.value]);
watch(arr.value, () => _watchValue.value = [...arr.value]);
watch(arr, () => _watchDeep.value = [...arr.value], { deep: true });
// watch(arr.value.length, () => _watchLength.value = [...arr.value]);
watch(() => arr.value, () => _watchGetter.value = [...arr.value]);
watch(() => arr.value.length, () => _watchGetterLength.value = [...arr.value]);
</script>

<template>
  <table>
    <tbody>
      <tr><td>模板</td><td>{{ arr }}</td></tr>
      <tr><td>watch(arr)</td><td>{{ _watch }}</td></tr>
      <tr><td>watch(arr.value)</td><td>{{ _watchValue }}</td></tr>
      <tr><td>watch(arr, { deep: true })</td><td>{{ _watchDeep }}</td></tr>
      <tr><td>arr.value.length</td><td>{{ _watchLength }}</td></tr>
      <tr><td>watch(() => arr.value)</td><td>{{ _watchGetter }}</td></tr>
      <tr><td>watch(() => arr.value.length)</td><td>{{ _watchGetterLength }}</td></tr>
    </tbody>
  </table>

  <div class="button-group">
    <button @click="arr.push(counter++)">arr.push(i)</button>
    <button @click="arr.splice(0, 1)">arr.splice(0, 1)</button>
    <button @click="arr[0] = counter++">arr[0] = i</button>
    <button @click="arr = [counter]">arr = [i]</button>
    <button @click="arr.length = 0">arr.length = 0</button>
  </div>
</template>

<style>
/* 样式由 Claude Sonnet 3.5 完成 */
* {
  font-family: consolas;
}
table {
  border-collapse: collapse;
  margin: 20px 0;
  width: 100%;
  max-width: 800px;
}

td {
  border: 1px solid #ddd;
  padding: 8px 12px;
}

td:first-child {
  font-weight: bold;
  background-color: #f5f5f5;
  width: 300px;
}

.button-group {
  margin: 20px 0;
}

button {
  margin-right: 10px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

button:last-child {
  margin-right: 0;
}
</style>