Vue生命周期执行顺序

1.介绍

vue每个组件都是独立的，每个组件都有一个属于它的生命周期。从一个组件的创建、挂载、更新、销毁，这就是一个组件的生命周期。

2.生命周期图 本图来源于vue官网

vue生命周期图.png

3.单组件执行顺序

1. 进入页面默认会自动执行beforeCreate -> created -> beforeMount -> mounted

  beforeCreate：在执行该函数时，$el、$data、methods、computed在this中【无法获取】
  created：在执行该函数时，$data、methods、computed在this中【可以】获取（Tip：如果我们不用操作DOM可以发起网络请求）
  beforeMount：template准备挂载
  mounted：在执行该函数时，$el可以在this中访问（Tip：可以发起网络请求）

2. 当数据发生改变的前一刻会自动执行beforeUpdate
3. 当数据改变完成会自动执行updated
4. 当页面准备销毁的前一刻会自动执行beforeDestroy
5. 当页面准备销毁完成会自动执行destroyed

3. 父子组件执行顺序

• 进入页面自动执行生命周期钩子有：

首先会自动执行【父组件】的生命周期钩子beforeCreate -> created -> beforeMount
然后会自动执行【子组件】的生命周期钩子 beforeCreate -> created -> beforeMount-> mounted
最后在自动执行【父组件】的生命周期钩子mounted

• 当组件数据发生更改：【各自执行各自】的生命周期钩子

父组件自己的数据发生改变执行自己的生命周期钩子beforeUpdate、updated
子组件自己的数据发生改变执行自己的生命周期钩子beforeUpdate、updated

• 当组件被销毁时，执行生命周期钩子有：

父组件会先执行beforeDestroy
子组件在执行beforeDestroy、destroyed
最后父组件执行destroyed