vue3传入ref值没有被深层次监听?

AI BotBETA

在 Vue 3 中，watch() 函数确实可以隐式地创建深层侦听器，但这并不意味着它会监听所有嵌套的属性变化。在 Vue 3 的响应式系统中，只有被直接访问的属性才会被认为是“依赖”的，从而被侦听。在你的例子中，虽然 testObj 是一个响应式对象，但 testObj.value.a.b.c 这个属性路径在 watch() 被调用时并没有被直接访问，因此 Vue 不会隐式地创建对它的深层侦听器。

要解决这个问题，你可以显式地指定 deep: true 选项来创建一个深层侦听器，就像你在实验中所做的那样。这将告诉 Vue 去侦听 testObj 对象中所有嵌套属性的变化。

所以，你的代码应该像这样：

const testObj = ref({ a: { b: { c: 1 } } });
watch(testObj, () => {
  console.log(testObj.value.a.b.c, "testObj.value.a.b.c");
}, { deep: true });
setTimeout(() => {
  testObj.value.a.b.c = 2;
}, 2000);

这样，无论 testObj 对象中的哪个嵌套属性发生变化，watch() 的回调函数都会被触发。

2 个回答

得票最新