Vue3 在使用 v-model:prop="data" 时不会触发 watch答案

【问题标题】：Vue3 won't trigger watch when using v-model:prop="data"Vue3 在使用 v-model:prop="data" 时不会触发 watch
【发布时间】：2021-12-30 09:55:42
【问题描述】：

我正在为我的过滤器创建一个子组件，当用户更改一些输入值时应该更新它......问题是当我将新数据发送到父组件时，手表不会触发！请检查我的代码，看看我哪里出错了...

父组件

定义组件

<FiltersComponent v-model:filters="filters" />

定义监视表达式

watch(filters, (value) => {
  getAccounts(value);
});

子组件

const emits = defineEmits(['update:filters']);
const props = defineProps({
  filters: {
    type: Object,
    default: () => ({
      ...
    }),
    required: true,
  },
});

function updateFilters(newValue, property) {
  console.log('updateFilters', newValue, property);
  emits('update:filters', { ...props.filters, [property]: newValue });
}

注意：console.log 正确打印 newValue 和属性，但手表永远不会发生！

PS：我也在父组件内部使用了v-on:update:filters="getAccounts(filters)"。但是过滤器数据没有在函数调用中更新...

【问题讨论】：

标签： javascript vue.js vuejs3

【解决方案1】：

在观察数组或对象时需要将 deep 设置为 true，以便 Vue 知道它应该观察嵌套数据的变化。试试这个：

    watch(filters, (value) => {
      getAccounts(value);
    },
      {
       deep: true
      }
    );

如需参考，请查看 vue 3 文档： https://v3.vuejs.org/guide/migration/watch.html#_3-x-syntax

【讨论】：