Vue watch监听prop变化 失效?

Question

/* 父组件内部 */
<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了，应该监测到啊？ 这是怎么回事，父组件它自己都可以正常监测到

Answer 1

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

Answer 2

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

---

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

Answer 3

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

Answer 4

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

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

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