Vue生命周期

什么是Vue生命周期

1.vue实例从创建到销毁的这一过程叫做Vue生命周期
2.基本过程：开始创建–> 初始化数据–>模板编译–>挂载DOM元素–>UI渲染—>数据更新–>组件卸载
3.生命周期有5组+1个组件报错，共计11个

• beforeCreate（创建前）
• created（创建后）
• beforeMount（载入前）
• mounted（载入后）
• beforeUpdate（更新前）
• updated（更新后）
• beforeDestory（销毁前）
• destoryed（销毁后）
• activated（KeepAlive中的组件激活）
• deactivated（KeepAlive中的组件未激活）
• errorCaptured（错误调用）

了解组件创建到挂载整个过程

针对每个生命周期到底干了什么事情，咱们直接从整个组件创建的整个过程进行分析

new Vue(options)

1.定义一些辅助变量，初始化一些基础属性，比如:

 - vm = this 取别名
 - vm.uid = uid++ Vue实例化的唯一标识
 - vm._isVue = true
 - vm._self = vm 定义一个指向自己的指针

2.而后合并选项，合并默认选项和自定义选项
获取当前实例中构造函数的option选项以及它所有父级的构造函数的options
3.执行真正的init初始化

 - initLifeCycle(vm)  初始化生命周期
 - initEvent(vm) 初始化事件
 - initRender(vm) 

执行上述任务，说明前期的准备工作已经完成，下面就是进入生命周期部分

beforeCreate

在此生命周期执行时候，数据和DOM结构均为出现，可以说啥也做不了
从beforeCreate到created期间组件实例做了以下工作：

 - initInjection(vm)
 - initState(vm)  初始化状态  这一过程较为丰富，会后面单独开一章进行细讲，暂时只需要了解其中顺序为 initProps,initMethods,initData,initComputed,initWatch
 - initProvide(vm)

created

从上述了解到，这时候组件中的props|method|data已经创建好，属于可用状态，但是组件中的模板还是尚未生成（经常在这一阶段发送请求）
全部初始化工作已经完成，开始执行挂载组件到el元素，执行vm.$mount(vm.$options,el)
从created到beforeMount期间组件实例做了以下工作：
这一阶段做了很多的逻辑判断，比如不能挂载在body,html这样的根节点，判断是否有render函数，当然，只需要知道在一过程最重要的就是获得render函数
但是如何获取render函数

• 配置项上是否有render函数，如果有，直接挂载
• 如果没有，判断是否有模板如果有，通过模板编译器将模板变异成渲染函数
• 如果没有模板，看是否有el,通过template = getOuterHTML(el)得到模板
  《备注》：将模板编译成渲染函数的步骤只要分为以下三步

 - const templateAst = parse(template)
 - transform(templateAst)
 - const code = generate(templateAst.jsnode)

只要记住，最重要的就是获得render函数

beforeMount

所以在此之前我们已经获取到，数据以及渲染函数，但是页面此时还是没有DOM结构
从beforeMount到Mounted期间组件实例做了以下工作：
将内存中编译生成的HTML结构替换el属性指定的DOM元素

mounted

经过上述诸多繁杂的步骤，这时候HTML结构已经成功的渲染到浏览器中，此时浏览器中已经包含当前组件的DOM结构
------------------上述为组件创建阶段

当然，如果此时有数据发生变化

beforeUpdate

根据变化后的最新数据，重新渲染组件的模板结构（新数据，旧模板结构）
从beforeUpdate到updated期间组件实例做了以下工作：
根据最新的数据，重新渲染组件的DOM结构

updated

根据最新的数据，此时已经完成了对组件DOM结构的重新渲染（新数据，新模板结构）

------------------上述为组件更新阶段

beforeDestory

将要销毁组件，但是此时还没有销毁，组件还是处于正常工作状态
从beforeDestory到destoryed期间组件实例做了以下工作：
销毁当前组件的数据监听，子组件，事件监听，定时器等

destoryed

组件已经被销毁，此组件上的DOM结构被完全移除

------------------上述为组件的销毁阶段

activated

如果需要一个组件实例，在销毁后再次出现的话，那么使用beforeDestroy和destroyed的话会导致性能浪费。组件实例被激活时使用，用于激活组件

deactivated

组件实例没有被激活

------------------上述为KeepAlive中的两个生命周期

errorCaptured

错误调用，当捕获一个来自后代组件的错误时调用

Vue生命周期的四个阶段

官方图解