生命周期（父子组件）

Question

问题：父组件的数据被修改以后，是子组件先 updated 还是父组件？

我的理解是：

1. 子组件通过发送事件($emit)修改父组件的数据，父组件的数据首先被修改，但不会在页面上更新，index beforeUpdate
2. 父组件检测有没有子组件通过 props 接受被修改过的数据
3. 承接第二条，有；子组件的数据自行修改，修改完毕后在页面上进行更新，list beforeUpdate → list updated
4. 承接第二条和第三条，无；父组件在页面上更新，index updated

总结：
父组件先修改数据，检查子组件中有没有接受过被修改的数据；
没，父组件更新；
有，先修改和更新子组件的数据，最后父组件更新

子组件有接受父组件被修改的数据：
index beforeUpdate → list beforeUpdate → list updated → index updated

子组件没有接受父组件被修改的数据：
index beforeUpdate → index update

---

于是我去测试第二种情况： 子组件没有通过 props 接收父组件被修改的数据，并且子组件通过 $emit 事件，修改父组件中的数据

子组件 Input.vue

<template>
  <div>
    <button @click="add">add</button>
  </div>
</template>

<script>
  export default {
    methods: {
      add() {
        this.$emit('add', '子组件修改父组件数据')
      }
    },
    beforeUpdate() {
      console.log('input beforeUpdate')
    },
    updated() {
      console.log('input updated')
    },
  }
</script>

父组件 index.vue

<template>
  <div>
    <Input @add="handleAdd" />
  </div>
</template>

<script>
  import Input from './Input'
  export default {
    data() {
      return {
        test: '数据'
      }
    },
    methods: {
      handleAdd(data) {
        this.test = data
      },
    },
    beforeUpdate() {
      console.log('index beforeUpdate')
    },
    updated() {
      console.log('index updated')
    },
    components: {
      Input,
    },
  }
</script>

在点击了 add 后，我预计控制台会输出：
index beforeUpdate
index updated
可实际结果是，控制台没有任何输出
请问老师，是我对于Vue 生命周期理解有误吗？

Answer 1

慕侠4372638 2020-02-19 16:37:10

这两个生命周期指的是由于数据更改导致的虚拟 DOM 重新渲染。

因为index.vue中没有使用test这个属性，即使test发生了变化，但是虚拟DOM 没有重新渲染，所以不会触发这两个生命周期。

如果index.vue中使用了test这个属性，就会触发这两个生命周期

你可以尝试在index.vue模版中加入 {{test}} 看一下控制台中的输出情况

• 提问者 慕粉3234573 #1

  重新试了，得出的结论是：
  1. 如果子组件和父组件中被修改的数据都没有在视图上显示，则两个组件不会触发 beforeupdate 和 updated 生命周期函数
  2. 如果子组件中通过 props 接收父组件被修改的数据，父组件会触发 beforeupdate 和 updated 生命周期函数，但子组件不会

• 提问者 慕粉3234573 #2

  谢谢哥们提供新的观点，之前一直没有想到数据要在页面上使用才会触发 update