# Vue–生命周期

# 生命周期是什么

生命周期 （Life Cycle） 的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为 “从摇篮到坟墓” （Cradle-to-Grave） 的整个过程

在 Vue 中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、销毁等一系列过程

我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作

# 生命周期有哪些

先搂一眼官方文档的图片

• Vue 生命周期总共可以分为 8 个阶段：创建前后，载入前后，更新前后，销毁前销毁后

# 1. 在 beforeCreate 和 created 钩子函数之间的生命周期

• 在这个生命周期之间，进行初始化事件，进行数据的观测，在 created 的时候数据已经和 data 属性进行绑定（放在 data 中的属性当值发生改变的同时，视图也会改变）。

• 注意：此时还是没有el选项

# 2. created 钩子函数和 beforeMount 间的生命周期

在这一阶段发生的故事还是比较多的。

• 首先判断是否存在 el 选项，若不存在则停止编译，直到调用 vm.$mount(el) 才会继续编译

• 是否有模板，有则将模板转化为 render 函数，通过 render 函数去渲染创建 Dom 树，无则编译 el 对象外层 HTML 作为模板

• 优先级： render > template > outerHTML

# 3. beforeMount 和 mounted 钩子函数间的生命周期

• 此阶段 vm.el 完成挂载， vm.$el 生成的 DOM 替换了 el 选项所对应的 DOM

# 4. mounted

• vm.el 已完成 DOM 的挂载与渲染，此刻打印 vm.$el ，发现之前的挂载点及内容已被替换成新的 DOM

# 5. beforeUpdate 钩子函数和 updated 钩子函数间的生命周期

• 当 vue 发现 data 中的数据发生了改变，会触发对应组件的重新渲染，先后调用 beforeUpdate 和 updated 钩子函数

# 6.beforeDestroy

• 0beforeDestroy 钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。

# 7.destroyed

• destroyed 钩子函数在 Vue 实例销毁后调用。调用后， Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，并不能清除 Dom ，仅仅销毁实例

# 数据请求在 created 和 mouted 的区别

• created 是在组件实例一旦创建完成的时候立刻调用，这时候页面 dom 节点并未生成

• mounted 是在页面 dom 节点渲染完毕之后就立刻执行的

• 触发时机上 created 是比 mounted 要更早的

• 两者相同点：都能拿到实例对象的属性和方法

• 讨论这个问题本质就是触发的时机，放在 mounted 请求有可能导致页面闪动（页面 dom 结构已经生成），但如果在页面加载前完成则不会出现此情况