Vue.js 观察vuejs上道具的变化

我想在子组件上使用watch作为道具，但它不起作用

这是我的密码：

props: {
    searchStore: {
        type: Object
    }
},
watch: {
    searchStore(newValue) {
        alert('yolo')
        console.log(newValue)
    }

不幸的是，它不起作用

我看了这篇文章，什么都试了，什么都没用：

我用Vue Devtools检查了我的道具，它正在改变

提前感谢社区

基于该代码，它应该可以工作，因此问题可能在其他地方。你能发布更多的代码吗

如果要立即运行，可以使用

immediate

。以下是语法：

  watch: {
    searchStore: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {

      }
    }
  },

deep:true

设置将深入监视对象内的更改

在父组件中更新此对象的部分时，请确保使用Vue的

$set

功能

this.$set(this.searchStore, 'myKey', {price: 12.22});

---

进一步阅读：

可能是“搜索商店”没有改变吗

由于它是一个对象，vue正在监视要传递的对象的新引用

意思是（不会触发手表）：

roorSearchStore.a=newVal

不会触发手表（因为参考没有改变）

你可以像丹尼尔说的那样看得很深， 或按如下方式进行Object.assign：

rootSearchStore=Object.assign（{}，roorSearchStore，{a:newVal}）

---

或者尝试在rootSearchStore中查看更改的时间戳。

您确定使用的是webpack/vue cli类型设置，而不是直接将其写入脚本文件吗？该语法是针对此类设置的。谢谢，deep:true解决了问题。还是可以把它写进代码里？不会随着时间触发错误？很高兴这起作用，我已经更新了答案，如果你有机会，请通读链接OK的

更改检测警告

部分。很高兴知道，虽然我不打算使用它，但家长组件正在更新它，孩子只会阅读数据或不清楚，您需要在Vue 3的父组件中执行此操作（使用

$set

），不再需要使用

$set

。不过，您仍然需要使用

deep

。