生命周期（父子组件）

来源：3-7 vue父子组件生命周期调用顺序

慕粉3234573

2020-02-19

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

我的理解是：

子组件通过发送事件($emit)修改父组件的数据，父组件的数据首先被修改，但不会在页面上更新，index beforeUpdate
父组件检测有没有子组件通过 props 接受被修改过的数据
承接第二条，有；子组件的数据自行修改，修改完毕后在页面上进行更新，list beforeUpdate → list updated
承接第二条和第三条，无；父组件在页面上更新，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 生命周期理解有误吗？

写回答

1回答