Vue-生命周期及组件间生命周期顺序

1、Vue生命周期

官网生命周期图镇场

源码可见：src/core/instance/init.js

Vue2	状态	操作
beforeCreate	实例初始化之后完全创建之前，this指向创建的实例，不能访问到data、methods等上的方法和数据都没初始化	初始化非响应式变量（一般用不到）
created	实例完全创建，可访问data、methods等上的方法和数据，但是未挂载到DOM，不能访问到el属性，ref属性内容为空数组	获取不操作dom的数据（一般用不到，不建议这里做获取数据操作）
beforeMount	模版已经编译完成但是尚未把模版渲染到页面上，页面上是一些模版字符串	一般用不到（不建议这里做获取数据操作））
mounted	模版已经真是的挂载到页面上	获取和操作DOM，$ref属性可以访问，数据请求
beforeUpdate	响应式数据更新，页面上数据还没有更新；重新渲染之前最后修改数据的机会	更新数据
updated	DOM已经更新，页面和data保持同步	可执行依赖于DOM的操作；不要在这里操作数据，可能陷入死循环
activated	keep-alive 包裹的组件专用，再次进入页面调用	可用于获取数据、初始化页面数据等
deactivated	keep-alive 包裹的组件专用，离开页面调用	可用于销毁当前组件定时器，事件等
beforeDestroy	实例销毁之前调用，实例仍然完全可用	可用于销毁定时器、解绑全局事件等操作
destroyed	实例销毁	-

生命周期执行阶段：

1. 创建阶段：执行了beforeCreate/Created/beforeMount/mounted四个钩子函数
2. 运行阶段：当改变data中定义的变量（响应式变量）时，会执行beforeUpdate/updated钩子函数
3. 销毁阶段：会执行beforeDestory/destroyed钩子函数

2、组件间生命周期

• 父子组件

// Home.vue
<template>
  <div>
    <span>
      {{ message }}
    </span>
    <ChildA :message="message" />
  </div>
</template>

......

beforeCreate() {
    console.log("Home_____beforeCreate");
  },

  created() {
    console.log("Home_____created");
  },

  beforeMount() {
    console.log("Home_____beforeMount");
  },

  mounted() {
    console.log("Home_____mounted");
  },

  beforeUpdate() {
    console.log("Home_____beforeUpdate");
  },

  updated() {
    console.log("Home_____updated");
  },

  beforeDestroy() {
    console.log("Home_____beforeDestroy");
  },

  destroyed() {
    console.log("Home_____destroyed");
  },

// ChildA.vue

<template>
  <div>{{ message }}</div>
</template>

......

beforeCreate() {
    console.log("A_____beforeCreate");
  },

  created() {
    console.log("A_____created");
  },

  beforeMount() {
    console.log("A_____beforeMount");
  },

  mounted() {
    console.log("A_____mounted");
  },

  beforeUpdate() {
    console.log("A_____beforeUpdate");
  },

  updated() {
    console.log("A_____updated");
  },

  beforeDestroy() {
    console.log("A_____beforeDestroy");
  },

  destroyed() {
    console.log("A_____destroyed");
  },

初始化时的打印结果：

Home_____beforeCreate
Home_____created
Home_____beforeMount
A_____beforeCreate
A_____created
A_____beforeMount
A_____mounted
Home_____mounted

子组件数据更新时的打印结果：

A_____beforeUpdate
A_____updated

父组件数据更新时的打印结果：

Home_____beforeUpdate
Home_____updated

当props数据更新时的打印结果：

Home_____beforeUpdate
A_____beforeUpdate
A_____updated
Home_____updated

子组件销毁时的打印结果：

A_____beforeDestroy
A_____destroyed

父组件销毁时的打印结果：

Home_____beforeDestroy
A_____beforeDestroy
A_____destroyed
Home_____destroyed

• 兄弟组件

// Home.vue
<template>
  <div>
    <span>
      {{ message }}
    </span>
    <ChildA :message="message" />
    <ChildB :message="message" />
  </div>
</template>

// ChildB.vue
<template>
  <div>{{ message }}</div>
</template>

......

beforeCreate() {
    console.log("B_____beforeCreate");
  },

  created() {
    console.log("B_____created");
  },

  beforeMount() {
    console.log("B_____beforeMount");
  },

  mounted() {
    console.log("B_____mounted");
  },

  beforeUpdate() {
    console.log("B_____beforeUpdate");
  },

  updated() {
    console.log("B_____updated");
  },

  beforeDestroy() {
    console.log("B_____beforeDestroy");
  },

  destroyed() {
    console.log("B_____destroyed");
  },

初始化时的打印结果：

Home_____beforeCreate
Home_____created
Home_____beforeMount
A_____beforeCreate
A_____created
A_____beforeMount
B_____beforeCreate
B_____created
B_____beforeMount
A_____mounted
B_____mounted
Home_____mounted

当props数据更新时的打印结果：

Home_____beforeUpdate
A_____beforeUpdate
B_____beforeUpdate
B_____updated
A_____updated
Home_____updated

父组件销毁时的打印结果：

Home_____beforeDestroy
A_____beforeDestroy
A_____destroyed
B_____beforeDestroy
B_____destroyed
Home_____destroyed

同一个组件中的beforeCreate，created和beforeMount是按顺序执行，并不会因为嵌套组件而打断，这三个钩子的执行顺序是先上后下，先外后内

销毁是先上后下，先内后外依次进行