Vue组件的生命周详解

一、生命周期 & 生命周期函数

1. 生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。
2. 生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行，不需要用户显式地调用。 —— 钩子函数

注意： 生命周期强调的是时间段，生命周期函数强调的是时间点。

二、组件生命周期函数的分类

三、生命周期图示

四、Vue2.0的生命周期函数

组件的生命周期经历的阶段：

• 创建阶段：beforeCreate、created、beforeMount、mounted
• 运行阶段：beforeUpdate、updated
• 销毁阶段：beforeDestroy、destroyed

4.1. 创建阶段

beforeCreate

• 创建阶段的第1个生命周期函数,组件的props，methods，data尚未被创建，处于不可用。
  在组件创建之前运行，此时Vue实例的el、data、data中的变量均为undefined

created（最早可以发起Ajax请求）

• 创建阶段的第2个生命周期函数，组件的props，methods，data已创建好，可以使用，但组件的模板结构尚未生成 ，不能操作DOM，但最早可以发起Ajax请求
• 组件已经创建完成，data、props已经初始化了，el还是undefined（组件还没有挂载到DOM上）
• 经常通过created函数调用methods中的方法，请求服务器的数据，并且把请求到的数据转存到data中，供template模板渲染时去使用

beforeMount

• 创建阶段的第3个生命周期函数,内存编译好的HTML结构准备渲染到浏览器中，此时浏览器中还没有当前组件的DOM结构，无法操作DOM
• el被绑定（和DOM绑定），但未挂载

mounted（最早可以操作DOM）

• 创建阶段的第4个生命周期函数，已经渲染内存的HTML结构到浏览器中，包含了当前组件的DOM结构，最早可以操作DOM
• 组件挂载之后，el绑定、组件挂载

4.2. 运行阶段（根据数据变化进入运行阶段）

beforeUpdate

• 运行阶段的第1个生命周期函数，将要根据数据变化后、最新的数据，重新渲染组件的模板结构，此时数据变化后还未放到模板结构上
• 当组件的内容被改变、隐藏的组件被显示、显示的组件被隐藏等触发

updated（当数据变化后，为了能够操作到最新的DOM结构）

• 运行阶段的第2个生命周期函数，完成了最新数据重新渲染到组件的DOM结构
• 当数据变化后，为了能够操作到最新的DOM结构,应将代码写在update中
• 更新结束后触发

4.3. 销毁阶段

beforeDestroy

• 销毁阶段的第1个生命周期函数，组件还处于正常工作状态。
• 在组件销毁之前。组件还是正常使用

destroyed

• Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

五、父子组件生命周期顺序

5.1. 挂载阶段

父beforeCreate() -> 父created() -> 父beforeMount() -> 子beforeCreate() -> 子created() -> 子beforeMount() -> 子mounted() -> 父mounted()

5.2. 更新阶段

父beforeUpdate() -> 子beforeUpdate() -> 子updated() -> 父updated()

5.3. 销毁阶段

父beforeDestroy() -> 子beforeDestroy() -> 子destroyed() -> 父destroyed()

Vue 父子组件生命周期钩子的执行顺序遵循：从外到内，再从内到外

六、与 keep-alive 的有关的生命周期函数

6.1. keep-alive 是什么

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

在被 keep-alive 包裹的组件/路由（router-view也是一个组件，如果直接被keep-alive包在里面，所有路径匹配到的视图都会被缓存） 中，会多出两个生命周期的钩子：activated 与 deactivated。

6.2. activated 钩子

在组件第一次渲染时会被调用（created/mounted也会被调用），之后在每次缓存组件被激活时调用。
使用来缓存组件状态，这个时候created/mounted钩子的逻辑就不要在写了，可以使用activated钩子触发。否则第一次进来会走两次

6.3. deactivated 钩子

组件被停用（离开路由）时调用。使用 keep-alive 就不会调用 beforeDestroy(组件销毁前钩子)和 destroyed(组件销毁)，因为组件没被销毁，被缓存起来了,这个钩子可以看作 beforeDestroy 的替代