前端面试题 Vue 中的生命函数(钩子函数)

一，生命周期(钩子函数) 的简介

二，四类钩子函数的触发条件及使用方法

钩子函数声明的位置:

1. Lifecycle-初始化 beforeCreate 和 created

2.Lifecycle-挂载 beforeMount 和 mounted

3.Lifecycle-更新 beforeUpdate 和 updated

4.Lifecycle-销毁 beforeDestroy 和 destroyed

一，生命周期(钩子函数) 的简介

生命周期函数又叫钩子函数, 像它的名字一样,这也是个函数,与其他 methods 中定义的函数不同的是,Vue 中已经规定好了他的触发条件,而这些不同的触发条件就是一个 Vue 文件从初始化到删除关闭必定经历的一些时间点,而我们就可以通过这些时间点进行各种操作

真正的钩子函数有很多,这里只介绍四类八个最常用的,如果想进行深入了解,请点击一下到这里去看看,这是官网,如果你只是正常工作开发或者面试需要,那么这篇文章可能会对您有些帮助

常用的钩子函数分为四类:

初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed

如下是一个 Vue 的生命周期顺序:

二，四类钩子函数的触发条件及使用方法

钩子函数声明的位置:

四类函数都是需要与 methods 同级声明,并且不可被 methods 调用,以 updated 举例如下

export default {data () {},methods: {},// 钩子函数和 methods 同级声明updated () {console.log('看到了吗 声明到这个位置');}
}

1. Lifecycle-初始化 beforeCreate 和 created

这个阶段有两个函数 beforeCreate 和 created

此阶段就是在浏览器初始化 data 和 methods 中数据前和后的时间点会分别调用beforeCreate 和 created

beforeCreate 代表的就是 Vue 中 data 和 methods 中定义的数据函数添加到浏览器之前这个时间点会触发的函数; 用处不是太大,因为 data 的数据在此时还没有添加到,因此无法操作数据,很少用,打印测试一下 data 中的数据最后获得的也是 undefined (定义方法如图,可以亲自测试一下加深印象)

created 代表的就是 Vue 中 data 和 methods 中定义的数据函数添加到浏览器初始化完毕之后触发的函数; 它此时 data 和 methods 中的数据方法都已经定义初始化完毕,已经可以调用其中的数据函数了,这也是一个最早的可以操作数据的钩子函数

另外提一句,这个函数 created 和 mounted 经常用来发初始化ajax请求渲染页面,但是根据每个人的习惯不同,用哪个的都有,我本人而言一般用 created ,除非涉及到获取DOM元素否则很少用 mounted 这是因为 created 的请求更早,打开页面不会出现闪的情况,网页加载更快

export default {data () {return {bl: true}},methods: {change () {this.bl = !this.bl}},<!-- Vue内部添加data和method数据前 -->beforeCreate(){// 在这里 打印的结果是 undefinedconsole.log(this.bl)}<!-- Vue内部添加data和method数据后 -->created(){// 在这里 打印的结果是 trueconsole.log(this.bl)}}

2.Lifecycle-挂载 beforeMount 和 mounted

这个阶段就是将 Vue的数据在内存中渲染为虚拟DOM模板, 将这个虚拟DOM模板渲染为真实的页面DOM元素前和后这两个时间点分别调用 beforeMount 和 mounted

beforeMount 简单来说,就是内存里的虚拟DOM已经运算完毕,但是还没有渲染到浏览器中,此时还无法看到页面内容,也无法访问DOM元素,用处也不大,如果硬是要访问,会返回 undefined

mounted 这个钩子函数就是虚拟DOM已经成功渲染到浏览器中了此时调用mounted 中的内容,这个函数和 created 一样可以用来发送初始化ajax请求,但是我本人更习惯用 created ,因为mounted 在生命周期中比较靠后,反应较慢,只有涉及到操作组件 DOM节点的时候才会用 mounted

beforeMount 不可以打印 DOM节点 ,mounted 可以,具体如图:

<template><div id="app"><div ref="biaoqian">这是个DOM节点</div></div>
</template><script>
export default {// dom节点 渲染浏览器之前beforeMount () {console.log('beforeMount 打印结果:',this.$refs.biaoqian);},// dom节点 渲染浏览器完成mounted(){console.log('mounted 打印结果:',this.$refs.biaoqian);}
}
</script>

3.Lifecycle-更新 beforeUpdate 和 updated

这个阶段是 页面DOM元素相关的数据更新 时,虚拟DOM更新完毕 和 真实DOM更新完毕后两个时间点触发 beforeUpdate 和 updated,非DOM相关数据更新不会触发

beforeUpdate 是页面元素相关联的数据在 虚拟DOM层面已经更新完毕 , 但是还 未渲染成真实DOM 这个状态,发生在 虚拟DOM打补丁之前 ,具体就是内存中的更新过程这个时间点会触发这个钩子函数,此时还未渲染到浏览器中DOM

此时如果通过 el 或 ref 获取真实DOM中的数据的话,此时打印的还是数据更新前的旧数据,因为此时的时间点,在数据层面已经更新了,但是渲染到页面上是一个异步操作,而更改数据和获取DOM是一个同步操作,因此此时打印DOM层面的数据是还未渲染的旧数据,打印data中的数据就是最新的更改后的数据

此时如果打印被改动的数据仍然会打印出改动成功后的数据,也可以基于改动后的数据进一步改动,这样下次再访问这个数据就是最新的如下图

export default {data () {return {text: '我是还没被改的文字'}},methods: {// 改动数据事件change () {this.text = '我被改了'console.log('change事件', this.text);    // 21行 打印结果}},// beforeUpdate 钩子函数beforeUpdate () {this.text = '我又被改了,我不干净了'console.log('改变时', this.text);    // 26行 打印结果}
}
</script>

updated 是数据改动完成并且成功重新打补丁渲染完成后调用的钩子函数,发生在改动数据的函数全部执行完毕并渲染到DOM之后,此时获取的数据一定是经过改动和 beforeUpdate 的最新数据,通过 el 和 ref 获取的DOM层面和数据层面的数据都是最新的,但是最好不要在updated 中改动数据,这样可能会再次触发 beforeUpdate 因此会造成死循环重复执行,打印结果如下:

export default {data () {return {text: '我是还没被改的文字'}},methods: {// 改动数据事件change () {this.text = '我被改了'console.log('change事件', this.text); // 21行 打印结果}},// beforeUpdate 钩子函数beforeUpdate () {this.text = '我又被改了,我不干净了'console.log('改变时', this.text); // 26行 打印结果},// updated 钩子函数updated () {console.log('改变之后', this.text); // 45行 打印结果},
}
</script>

4.Lifecycle-销毁 beforeDestroy 和 destroyed

beforeDestroy 和 destroyed用法如上一样,只不过他的触发时机是 Vue实例销毁的前后,destroyed用处多用于清除定时器和清空localstorage中的数据,beforeDestroy用的不多,很惭愧这两个我也不是很了解