组件之间生命周期的关系

生命周期是大家比较熟悉的知识，那么父组件与子组件，不同组件之间切换时，生命周期是如何执行的呢？当子组件数据变化时，父组件与子组件的生命周期执行顺序是什么样的？

先放一张生命周期图：

首次加载时，生命周期的执行顺序：

beforeCreate()被调用
Test.vue:73 created()被调用
Test.vue:76 beforeMount()被调用
A.vue:10 A组件beforeCreate()被调用
A.vue:13 A组件created()被调用
A.vue:16 A组件beforeMount()被调用
A.vue:19 A组件mounted()被调用
Test.vue:79 mounted()被调用
复制代码

切换菜单Posts重新执行父组件的beforeUpdate()和updated(),同时子组件A调用销毁钩子beforeDestroy()和destroyed()

这里是先初始化组件B再销毁组件A

关于data变化，调用钩子函数情况

父组件data更新，点击按钮，调用父组件的beforeUpdate()和updated()

子组件A data更新，点击子组件A按钮，只调用子组件A的beforeUpdate()和updated()

子组件B data更新，点击子组件B按钮，只调用子组件B的beforeUpdate()和updated()

父传子 props

使用props时，子组件D第一时间就可以获取到props传过来的值，报错是因为beforeCreate()还获取不到props beforeCreate生命周期

<D :source="source"></D>
data() {
    return {
      source: 'source(父组件)',
    }
  },
复制代码

<template>
  <div>
    我是子组件D <br />
    收到的props----{{ source }}
  </div>
</template>
props: ['source']
复制代码

子调父 $emit

不触发生命周期函数，直接调用父组件的函数

<D @parentFun="parentFun"></D>
parentFun(param) {
  console.log('父组件接收到的参数', param)
}
复制代码

<template>
  <div>
    我是子组件D <br />
    <button @click="handleD">调用父组件的函数</button>
  </div>
</template>
data() {
    return {
      param: 1,
    }
},
methods: {
    handleD() {
      this.param = this.param + 1
      this.$emit('parentFun', this.param)
    },
}
复制代码

子组件向父组件传递参数时，赋值给父组件data中的param，父组件也没有触发生命周期函数，但是监听data中的此参数，可以监听到

<D @parentFun="parentFun"></D>
data() {
    return {
      param: 0,
    }
},
parentFun(param) {
  this.param = param
  console.log('父组件接收到的参数', param)
}
复制代码

还有很多复杂的情况下生命周期的执行顺序变化，等以后遇到进行补充，若有写的不对的地方，欢迎指正