vue生命周期

一、生命周期概念

1. 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
2. 同时在这个过程中也会运行一些叫做生命周期钩子的函数
3. 这给了用户在不同阶段添加自己的代码的机会。
4. 即是在什么时间段使用什么逻辑，实现什么功能。

二、生命周期有哪些？

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期

生命周期描述
beforeCreate 组件实例被创建之初
created 组件实例已经完全创建
beforeMount 组件挂载之前
mounted 组件挂载到实例上去之后
beforeUpdate 组件数据发生变化，更新之前
updated 组件数据更新之后
beforeDestroy 组件实例销毁之前
destroyed 组件实例销毁之后
activated keep-alive 缓存的组件激活时
deactivated keep-alive 缓存的组件停用时调用
errorCaptured 捕获一个来自子孙组件的错误时被调用

三、生命周期整体流程

具体分析

beforeCreate之前：

• 刚初始化一个空的vue实例对象，对象上只有默认的生命周期和默认事件，其他东西尚未创建

beforeCreate

• 数据观测和初始化事件还未开始

beforeCreate -> created

• 初始化vue实例，进行数据观测

created

• 完成数据观测，属性与方法的运算，watch、event事件回调的配置
• 可调用methods中的方法，访问和修改data数据，触发响应式渲染dom，可通过computed和watch完成数据计算
• 此时vm.$ el （vm是vue实例对象,vm.$el指的是当前组件的DOM元素）并没有被创建

created -> beforeMount

• 判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译
• 优先级：render > template > outerHTML
• vm.el获取到的是挂载DOM的

beforeMount

• 在挂载开始之前被调用，相关的render函数首次被调用，实例已经完成编译模板，把data里的数据和模板生成html。
• 此阶段vm.el虽已完成DOM初始化，但并未挂载在el选项上
• 在此阶段可获取到vm.el

beforeMount -> mounted

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

mounted

• 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。
• 实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。
• 完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate

• 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
• 更新的数据必须是被渲染在模板上的（el、template、render之一）
  此时view层还未更新
• 若在beforeUpdate中再次修改数据，不会再次触发更新方法

updated

• 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。
• 然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。
• 该钩子在服务器端渲染期间不被调用。

beforeDestroy

• 实例被销毁前调用，此时实例属性与方法仍可访问
• 调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。
• 该钩子在服务器端渲染期间不被调用。

destroyed

• 在实例销毁之后调用，完全销毁一个实例。可清理它与其它实例的连接（并不能清除DOM，仅仅销毁实例），解绑它的全部指令及事件监听器
• 该钩子在服务器端渲染期间不被调用。