生命周期四个阶段,八个钩子函数

324 阅读1分钟

vue的生命周期是什么

组件从 创建 到 销毁 的整个过程就是生命周期

image-20210511152835915.png

作用: 特定的时间点,执行特定的操作

场景: 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据

下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。 Day03.png

四个阶段

从创建到销毁的过程 
1.初始化 ==> 创建组件 ==> beforeCreate created
2.挂载   ==> 渲染组件 ==> beforeMount  mounted
3.更新   ==> 数据发生改变 ==> beforeUpdate  updated
4.销毁   ==> 释放资源 ==> beforDestroy  destroyed

八个钩子函数


  1. Vue实例从创建到编译模板执行了 beforeCreate / created

beforeCreated: 组件实例刚刚被创建,组件属性计算之前,如data属性等。

created: 组件实例创建完成,属性已绑定,但DOM还未生成。


  1. Vue实例从创建到显示都经历了: beforeCreate / created / beforeMount / mounted

beforeMount: 模板挂载之前调用,为“虚拟”的元素节点,DOM渲染之前, 不能获取真实DOM

mounted:模板挂载之后调用,虚拟dom节点被真实的dom节点替换,于是在触发mounted时,可以获取到真实的dom元素


  1. 当数据发生变化并更新页面后执行: beforeUpdate / updated

beforUpdate: 数据改变,DOM更新前调用

updated: 数据改变,DOM更新后调用


  1. 一般在 beforeDestroy / destroyed 里手动清除定时器/全局事件

beforeDestroy: 组件销毁之前调用 释放资源

destroyed: 组件销毁之后调用