Vue3中watch监听reactive对象单个属性不触发如何解决？

你在创建venueFilter这个ref实例时，传入的初始值state.venueFilter是基础类型null，此时只会做值拷贝，生成的ref实例和state中的venueFilter属性完全没有关联。模板中修改的是state.venueFilter，你监听的是独立的ref变量，自然无法触发回调。

你可以选择以下任意一种方式实现监听：

方案1：直接监听reactive对象的指定属性 #

通过 getter 函数返回要监听的reactive属性即可：

setup() {
  const state = reactive({
    // .....
    venueFilter: null,
  })

  watch(
    () => state.venueFilter,
    (newVal) => {
      console.log('invoked watch');
      if(newVal) {
        doSomething();
      }
    }
  );

  return {
    ...toRefs(state),
    //.....
  }
}

如果venueFilter是引用类型（对象/数组），需要监听内部属性变化的话，可以在watch第三个参数加上{ deep: true }配置。

方案2：通过toRef创建关联的ref实例再监听 #

toRef会创建和原reactive属性关联的ref实例，修改原属性会同步更新ref的值，反过来也成立：

setup() {
  const state = reactive({
    // .....
    venueFilter: null,
  })

  const venueFilter = toRef(state, 'venueFilter');
  watch(venueFilter, (newVal) => {
    console.log('invoked watch');
    if(newVal) {
      doSomething();
    }
  });

  return {
    ...toRefs(state),
    //.....
  }
}

内容的提问来源于stack exchange，提问作者rahulserver