Vue的生命周期
组件的创建到销毁的过程就叫vue的生命周期
-
vue生命周期钩子官方文档:
- 官方文档图解介绍:生命周期图示
- 官方文档详细介绍:vue生命周期钩子介绍
-
==vue生命周期钩子介绍 : vue从创建到销毁过程中,会执行的一些回调函数 ==
钩子
: 一种回调函数- 例如
- window.onload = function(){ dom加载完毕,外部资源加载完毕就执行 }
- 例如
生命周期
: vue实例从出生到扑街的过程- 出生:
- 创建vue实例
- 创建data数据
- 创建el挂载点
- 将data数据渲染到el挂载点
- 扑街
- vue实例被销毁
- 这里销毁不是指vue实例变成了null,而是指解除data与el的关联
- 说人话:修改了data,页面不会被渲染
- 这里销毁不是指vue实例变成了null,而是指解除data与el的关联
- vue实例被销毁
- 出生:
-
注意点
- 根据官网文档介绍 : 每一个生命周期钩子中的this都是指向vue实例
- 所以,生命周期钩子
不能
是箭头函数
vue的生命周期钩子分为四大阶段,8个方法
初始化
挂载
更新
销毁
执行顺序 | 钩子函数 | 执行时机 |
---|---|---|
1 | beforeCreate(){} | vue实例创建了,但是el和data还没有创建 (准备创建data) 底层(初始化vue实例,初始化钩子函数,初始化一些事件和侦听器配置项) |
2 | created() {} | data数据创建了,但是el挂载点还没有创建 (准备创建el) 底层:初始化data中的数据和methods中的方法 |
3 | beforeMount() {} | el挂载点创建了,但是data数据还没有渲染(准备渲染中) 底层:创建el挂载点,并且生成虚拟DOM |
4 | mounted() {} | data数据 第一次 渲染完毕 (完成初始渲染) 底层:将虚拟dom渲染成真实DOM |
5 | beforeUpdate() {} | 检测到data数据变化,但是还没有开始重新渲染 (data变了,准备重新渲染中) 会执行多次 |
6 | updated() {} | 变化后的data数据 ,完成渲染到页面 (完成重新渲染)会执行多次 |
7 | beforeDestroy() {} | vue实例销毁即将销毁(解除data与el的关联),之后修改data,页面不会被渲染 底层 : 解除 事件绑定、侦听器、组件 |
8 | destroyed() {} | vue实例已经销毁 |