清空 ref 对象时不会触发 watch

Question

我已经在 vue 3 中创建了一个用于过滤的动态模型，但在清除（清空对象）时遇到了一些问题

 setup() {
    const model = ref({});

    watch(model.value, (value) => {
      console.log("model changed");
      console.log(model.value);
    });

    const addLanguage = (language) => {
      model.value["meta_" + language.toLowerCase()] = language;
    };

    const clear = () => {
      model.value = {};
    };

    return {
      addLanguage,
      clear,
    };
  },

我也在这里创建了一个示例进行测试https://codesandbox.io/s/mystifying-chebyshev-9tjogk?file=/src/App.vue

正在向模型添加新元素...触发观察器....但是当您清除对象（空）时，不会再触发观察功能。

知道为什么吗？

Answer 1

监视源（即 model.value）在 clear() 中被替换为空对象，因此不再触发监视程序。

解决方案

不是解包 model 引用，而是将 ref 本身作为监视源传递。
将deep标志传递给手表，以便观察到属性addition/deletion。

watch(
  model, 1️⃣
  (value) => { /* handle change */ },
  { deep: true } 2️⃣
)

demo

清空 ref 对象时不会触发 watch

watch is not triggered when empty the ref object

javascript

vue.js

vuejs3

解决方案