为什么更改 beforeCreated/created/beforeMount 中的数据不能在 VUE 中触发 watch？

Question

为什么更改 beforeCreated/created/beforeMount 中的数据不能在 VUE 中触发 watch？

<template>
  <div>
    <titi :namer="parentName"></titi>
  </div>
</template>

<script>
export default {
  components: {
    titi: {
      template: "<h1>{{namer}}</h1>",
      props: ["namer"],
      watch: {
        namer: {
          immediate: false,
          handler(val, oldVal) {
            console.log("jackieyin", val);
          }
        }
      },
      mounted() {
        console.log("jackieyin", "mounted");
      }
    }
  },
  data: function() {
    return {
      parentName: "jackieyin"
    };
  },
  beforeCreate() {
    console.log(222);
    this.parentName = "sunwukong";
  },
  created() {
    this.parentName = "kewu";
  },
  beforeMount() {
    this.parentName = "tangseng";
  },
  mounted() {
    // var that = this;
    // this.parentName = "tyty";
    // setTimeout(() => {
    //   that.parentName = "shaseng";
    // }, 500);
  }
};
</script>

我尝试在这些生命周期中更改数据，但无法触发子元素道具观看。 你可以在这里试试： https://codesandbox.io/s/vue-watch-inx4z

Answer 1

这与我预期的一样。 如果您考虑下面的生命周期顺序，则在父级上，子组件仅在父级上的beforeMount之后和在父级上mounted之前创建。 因此，您对子项的监视不会因为对beforeCreate中所做的或由父项created的道具的更改而触发，因为此时子项不存在。

• 创建之前的父beforeCreate
• 父created
• 安装前的父beforeMount
  • 子beforeCreate
    • Child watcher 将在此触发if immediate: true ，并传递初始值
  • 孩子created
  • Child beforeMount
  • 儿童mounted
• 此处对属性的任何更改都将从此时触发子观察者
• 父mounted

在您的观察者中，您在手表上设置了值immediate: false 。 这意味着，当设置属性的初始值时，它不会触发。 如果将其更改为 true，您将看到父级在beforeMount中设置的值会在创建子组件时立即触发监视。 此外，如果您在父级mounted的生命周期挂钩中再次更改该值，则无论immediate的值如何，子级中的观察者都会拾取该值。