Vue生命周期钩子介绍
vue从创建到销毁的过程中 会执行一些回调函数
钩子:一种回调函数
生命周期:vue实例从出生到销毁的过程
(1)出生:
创建vue实例
创建data数据
创建el挂载点
将data数据渲染到el挂载点
(2)销毁
vue实例被销毁
这里的销毁不是指实例变成了null 而是指解除data与el的关联
注意:每一个生命周期钩子中的this都是指向vue实例 所以生命周期钩子不能是箭头函数
vue的生命周期钩子阶段
分为四个大阶段 八个方法
阶段:
初始化阶段
挂载阶段
更新阶段
销毁阶段
方法:
| 执行顺序 | 钩子函数 | 执行时机 |
| 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实例已经被销毁 |
一:初始化阶段
1.new Vue() - Vue实例化(组件也是一个小的Vue实例)
2.Init Events & Lifecycle - 初始化事件和生命周期函数
3.beforeCreate - 生命周期钩子函数被执行
4.Init injections & reactivity - Vue内部添加data和methods等
5.created - 生命周期钩子函数被执行,实例创建
6.接下来是编译模板阶段 - 开始分析
7.Has el option? - 是否有el选项 - 检查要挂到哪里
没有 : 调用$mount()方法
有 : 继续检查template选项
beforeCreate钩子
这个钩子几乎不怎么用
初始化vue实例
初始化事件(不是页面点击事件 而是vue本身自带的一些事件)
初始化生命周期函数
created
这个钩子非常重要
初始化data中的数据
初始化methods里面的方法
经典应用 : 页面一加载 ajax请求数据渲染页面 一般写在这个钩子里面
二:挂载阶段
1.template选项检查
有 : 当前vue环境是脚手架 webpack就会编译.vue文件
没有 : 当前vue环境是html环境
2.虚拟DOM挂载成真实DOM之前
3.beforeMount - 生命周期钩子函数被执行
4.Create - 把虚拟DOM和渲染的数据一并挂到真实DOM上
5.真实DOM挂载完毕
6.mounted - 生命周期钩子函数被执行
beforeMount
这个钩子不常用
根据你的vue代码环境(html环境与脚手架环境),来编译模板html结构
完成el挂载点加载(生成虚拟DOM)
mounted
这个钩子很重要
这个钩子是最早可以获取页面DOM元素的钩子
虚拟DOM和渲染的数据一并挂到真实DOM上
三:更新阶段
1.当data里数据改变,更新DOM之前
2.beforeUpdate - 生命周期钩子函数被执行
3.Virtual DOM - 虚拟DOM重新渲染,打补丁到真实DOM
4.updated - 生命周期钩子函数被执行
5.当有data数据改变 - 重复这个循环
beforeUpdate
这个钩子用的不是很多
检测data数据变化,修改虚拟DOM
updated
这个钩子用的不是很多
完成data渲染(将虚拟DOM渲染成真实DOM)
这两个钩子会执行多次 只要data中数据变化了 就会执行
四:销毁阶段
1.当$destroy()被调用 - 比如组件DOM被移除(例如v-if)
2.beforeDestroy - 生命周期钩子函数被执行
3.拆卸数据监视器 子组件 和 事件侦听器
4.实例销毁后,最后触发一个钩子函数
5.destroyed - 生命周期钩子函数被执行
beforeDestroy
这个钩子有些场景会用到 例如在这个钩子里面移除定时器clearInterval()
这个钩子准备移除你的组件
移除数据监视器 侦听器等
destroyed
这个钩子几乎不怎么用,因为已经销毁了,一些都晚了