观看 vuejs 上的 props 变化答案

【问题标题】：Watch props change on vuejs观看 vuejs 上的 props 变化
【发布时间】：2018-12-19 22:15:03
【问题描述】：

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

这是我的代码：

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

不幸的是，它不起作用

我查看了这篇文章并尝试了所有方法，但没有任何效果：VueJs 2.0 - how to listen for `props` changes

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

提前感谢社区！

【问题讨论】：

您确定您使用的是 webpack/vue-cli 类型设置而不是直接将其写入脚本文件吗？该语法特定于此类设置。

标签： vue.js vuejs2

【解决方案1】：

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

如果你想立即运行，你可以使用immediate。这是语法：

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

      }
    }
  },

deep: true 设置将密切关注对象内的变化。

当您在父组件中更新此对象的部分内容时，请确保使用 Vue 的 $set 函数。

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

进一步阅读：https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

【讨论】：

谢谢，deep: true 解决了这个问题。仍然可以在代码中使用它吗？不会随着时间的推移触发错误？
很高兴，我已经更新了答案，如果您有机会，请阅读链接的Change Detection Caveats 部分
好的，谢谢，很高兴知道，虽然我不打算使用它，但父组件正在更新它，孩子只读取数据
抱歉，不清楚，您需要在父组件中进行（使用$set）
在 Vue 3 中，不再需要使用 $set。不过你仍然需要使用deep。

【解决方案2】：

会不会是“searchStore”没有改变？

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

意思（不会触发watch）：

roorSearchStore.a=newVal

不会触发手表（因为引用没有改变）。

你可以像丹尼尔所说的那样深入观察，或者像这样做 Object.assign：

rootSearchStore = Object.assign ({},roorSearchStore,{a:newVal})。

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

【讨论】：