[JavaScript知识库]Vue生命周期钩子

Vue生命周期钩子介绍

vue从创建到销毁的过程中 会执行一些回调函数

钩子:一种回调函数

生命周期:vue实例从出生到销毁的过程

(1)出生:

创建vue实例

创建data数据

创建el挂载点

将data数据渲染到el挂载点

(2)销毁

vue实例被销毁

这里的销毁不是指实例变成了null 而是指解除data与el的关联

注意:每一个生命周期钩子中的this都是指向vue实例 所以生命周期钩子不能是箭头函数

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

这个钩子几乎不怎么用,因为已经销毁了,一些都晚了