观察 Vue 3 中嵌套属性的变化

Question

我创建了一个具有反应性的简单状态管理 API

我的商店文件如下所示：

import { reactive, watch  } from "vue";

const state = reactive({
   form : {
    service_id : null
   }
})

 watch('state.form.service_id', (newVal, oldVal) => {
     console.log('service changed');
 }, { deep: true });
 

export default {
  state, 
}

我正在尝试观察 state.form.service_id 中的变化，但出现以下错误：

[Vue 警告]: 无效的监视源: state.form.service_id 监视源只能是 getter/effect 函数、ref、反应对象或这些类型的数组

如果我用下面的代码替换手表代码，那么它就可以了。

 watch('state.form', (newVal, oldVal) => {
     console.log('form changed');
 }, { deep: true });

但我需要注意 state.form.service_id 的变化。有什么解决办法吗？

Answer 1

尝试使用 getter 函数而不是属性路径：

 watch(()=>state.form.service_id, (newVal, oldVal) => {
     console.log('service changed');
 }, { deep: true });

观察 Vue 3 中嵌套属性的变化

Watch change in nested property in Vue 3

vue.js

vuejs3

观察 Vue 3 中嵌套 属性 的变化

Watch change in nested property in Vue 3

vue.js

vuejs3

观察 Vue 3 中嵌套属性的变化