vue 3 有没有办法观察对象的特定属性？

Question

这里文档仅展示了一种使用以下方式观察整个反应对象的方法

const state = reactive({ 
  id: 1, 
  name: "",
});

watch(
  () => state,
  (state, prevState) => { // ...
  }
);

如果我只想观看 的变化怎么办name？

watch(state.name, (name, prevName) => {
    // for example: send a request to serve side for occupation validation
});

上面的代码是错误的。

Answer 1

您可以像这样观察单个属性的变化：

const state = reactive({
  id: 1,
  name: ""
});

watch(
  () => state.name,
  (newName, prevName) => {
    /* ... */
  }
);