Vue watch监听prop变化 失效?

  • Z时代
  • 2024-03-02
  • 分类：IT

/* 父组件内部 */
<div>
  <!-- 子组件 -->
  <son :id="id"></son>
</div>
data() {
    return {
      id: -1
    }
  }
created() {
  this.id = 12
}
watch: {
  id() {
    console('变变变')
  }
}
/* 子组件内部 */
props: {
  id: Number
}
watch: {
  id() {
    console('变变变')
  }
}

父组件自己能检测到，子组件中没有检测到，，我以为流程是这样的 子组件prop id 在初始值-1不执行监测的回调是正常的，因为我没有使用immediate属性, 但它现在已经不在是初始值-1了 而是12了，应该监测到啊？ 这是怎么回事，父组件它自己都可以正常监测到

回答：

父级先create，子级再create，watch在create中完成，所以父级create完成时，子级watch还未初始化

回答：

变的太早了。子组件还没初始化。你可以在子组件的created console 一下 id

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

子组件使用深度监听，美国的网友也用vue吗

回答：

生周期钩子初始化执行顺序如下：
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

通常是在异步的情况下去修改这个值，而你的例子中只是简单的进行赋值操作，这样还不如直接作为初始值。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

以上是 Vue watch监听prop变化 失效? 的全部内容， 来源链接： utcz.com/p/933838.html

回到顶部