Vue中组件的生命周期

首先来看一个图，这个图我是搜索百度图库看到的，感觉还不错。这个在vue官网上也可以看到，这应该是某位学者对这些的一些中文注解

Vue组件的生命周期分为四个阶段，分别是创建、挂载、更新、销毁。每个阶段里都有两个对应的钩子函数，一共八个。

一、创建阶段：

• 创建阶段分为beforeCreate（）这个阶段还没有获取到数据，应用的不多
• created（）这个阶段用的很频繁也是接触最多的一个钩子函数，在里面可以请求一些页面一打开就需要获取的ajax数据，也就是一些异步操作

二、挂载阶段：

• beforeMount（）这个阶段用的不多，在这个阶段可以获取到数据，但是一般建议在created()获取
• mounted（）该阶段执行完了模板解析，以及挂载，同时组件根组件被赋给了 $ el元素，该阶段可以通过DOM操作来对组件内部元素进行处理了

三、更新阶段：

• beforeUpdate（）数据更新时调用这个钩子函数，但是还没有对视图进行重新渲染，这个时候，可以获取视图更新之前的状态

• updated（）由于数据的变更导致的视图重新渲染，可以通过DOM操作来获取视图的最新状态

四、卸载阶段

• beforeDestroy（）实例销毁之前调用，移除一些不必要的冗余数据，一些对当前销毁的组件的定时器，还有对当前组件定义的一些监听事件，可以避免内存泄漏，资源的浪费
• destroyed（）Vue实例销毁后调用

父子组件生命周期执行顺序

父子组件嵌套的生命周期执行顺序，在我的理解，我在对组件生命周期的理解上，将他们分为两个大阶段，一个时挂在前的，和挂载之后的

组件挂在前的时候

先执行父组件的beforeCreate（）
接着执行父组件的created（）
再执行父组件的beforeMount（）
接着执行子组件beforeCreate（）
接着执行子组件的created（）
再执行子组件的beforeMount（）
再执行子组件的mounted（）
最后执行父组件的mounted（）

接着时挂载后的组件数据更新阶段的执行顺序

先执行父组件的beforeUpdate（）
再执行子组件的beforeUpdate（）
再执行子组件的 updated（）
再执行父组件的 updated（）

接着时挂载后的组件销毁阶段的执行顺序

先执行父组件的beforeDestroy（）
再执行子组件的beforeDestroy（）
再执行子组件的 destroyed（）
再执行父组件的 destroyed（）

规律：父组件先开始执行，然后等到子组件执行完，父组件收尾。