Vue生命周期

一.理解生命周期概念

一个Vue实例的生命周期即是 从创建到销毁的整个过程。

就如同人的一生中会经历很多个阶段，如幼年、青年、成年、中年、老年等等。

(也可以理解为一个人从出生到死亡的过程.)

二.钩子函数

概念理解：人在生命的每个阶段要做的事情也不同,如青年时应该好好读书，大学毕业后就要步入社会等等。 钩子函数即是在生命周期中"特定的时间点"，执行特定的操作。

钩子函数的本质：是Vue框架内置函数，随着组件的生命周期阶段进行而自动执行。

 

三：钩子函数的分类

总体上分为：四大阶段、八个方法

 

四.初始化阶段

如图所示 Vue实例初始化阶段的顺序

1.new Vue（）--- Vue实例化（组件也是一个小的Vue实力）

2.Init Events & Lifecycle --- 初始化事件和生命周期函数

3.beforeCreate --- 生命周期钩子函数被执行

4.Init injections&reactivity --- Vue内部添加data和methods等

5.created --- 生命周期钩子函数被执行，实例创建

6.接下来是编译模板阶段

created（详细补充）：

因为在一般的项目开发中，经常用到的钩子函数基本就是  created 和 mounted 所以对它们的使用做详细补充说明。

1.触发时机：当组件实例创建完毕之后自动触发

2.这个钩子函数中可以访问组件的成员，如data

3.应用场景：在这个钩子函数中，一般是进行数据的获取（如axios请求的回调数据）

注意点：这个阶段dom结构还没有解析，所以无法操作Dom元素。

五.挂载阶段

        顺序承接上图

图文含义解析：

1.template选项检查

有 - 编译template返回render渲染函数

无 – 编译el选项对应标签作为template(要渲染的模板)

2.虚拟DOM挂载成真实DOM之前

3.beforeMount – 生命周期钩子函数被执行

4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5.真实DOM挂载完毕

6.mounted – 生命周期钩子函数被执行

mounted（补充说明）：

1.触发时机：当组件的模板解析完毕之后自动触发。

2.应用场景：一般在这个钩子函数中会进行对相应Dom元素的操作

六.更新阶段

      承接上图

 图文含义解析:

1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4.updated – 生命周期钩子函数被执行

5.当有data数据改变 – 重复这个循环

updated（补充说明）：

1.触发时机：当组件中的数据更新时自动触发。

2.应用场景：当数据变化之后，需要对其进行相应的处理

七.销毁阶段

 

图文含义解析:

1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)

2.beforeDestroy – 生命周期钩子函数被执行

3.拆卸数据监视器、子组件和事件侦听器

4.实例销毁后, 最后触发一个钩子函数

5.destroyed – 生命周期钩子函数被执行

distoryed（补充说明）：

1.触发时机：当组件销毁之后触发。

2.应用场景：主要用于清除当前组件所占用的全局资源。