veu生命周期

VUE生命周期

首先明确：vue实例的生命周期和组件的生命周期其实说的是一个东西，因为组件本质上也是vue实例

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

生命周期（Life Cycle）是指一个vue实例/组件 从创建到销毁的整个过程。

也就是从

开始创建(beforeCreate)、

初始化数据(created)、

编译模板(beforeMount)、

挂载在 dom -> 渲染(Moubt)、

更新(boforeUpdate)、

再渲染(updated)、

准备销毁(boforeDestroy)、

销毁(destroy)

等一系列过程

生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

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

二、 生命周期的 阶段 和 主要函数

vue的声明周期常见的主要分为4大阶段和8大钩子函数

1、创建前 / 后

• beforeCreate函数执行时：props/data/method等还没有初始化，尚未被创建，都处于不可以用

• created 函数执行时：props/data/method等已经初始化完成，都处于可用状态，但是组件的模版结构尚未生成

  created是一个很重要的函数，发请求拿数据都在这个函数里，也就是在这个时间节点发起axios请求从后端拿数据。但在这个时间节点不可以操作DOM，因为组件的HTML结构还没有生成

2、渲染前/后

• beforeMount 函数执行时：将要把内存中编译好的HTML结构渲染到浏览器中，但还没有渲染，此时浏览器中没有当前组件的DOM结构

• mounted 函数执行时：已经把内存中的HTML结构，成功的渲染到浏览器之中，此时浏览器中已经包含了当前组件的DOM结构

  这里是最早操作DOM结构的时间结点

3、数据更新前/后

• beforeUpdate函数执行时：已经可以拿到最新的数据，但还没渲染到视图中去。

  当数据发生改变，才会触发beforUpdate

• updated函数执行时：已经根据最新的数据，完成了组件DOM结构的重新渲染。

4、销毁前/后

• beforeDestroy 函数执行时：实例进入准备销毁的阶段、此时data 、methods 、指令等还是可用状态

• destroyed函数执行时：实例已经完成销毁！、此时data 、methods 、指令等都不可用

三、 生命周期图示

四、不常用的生命周期函数

keep-alive 主要用于保留组件状态或避免重新渲染。

activated只有在keep-alive 组件激活时调用。

deactivated只有在keep-alive 组件停用时调用。

errorCapured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。