网站建设运营方案厦门seo屈兴东

结果

不废话，直接上结果：

方法	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>