前端学习 - Vue 生命周期
Posted 宇六岁鸭
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端学习 - Vue 生命周期相关的知识,希望对你有一定的参考价值。
1. 生命周期
1-1 基本概念
什么是vue生命周期?
Vue 实例
从创建
到销毁
的过程
,就是生命周期。
注意:浏览器有8个钩子,但是node
中做服务端渲染的时候只有beforeCreate
和created
-
beforeCreate是
new Vue()
之后触发的第一个
钩子,在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。 可以做页面拦截。当进一个路由的时候我们可以判断是否有权限进去,是否安全进去,携带参数是否完整,参数是否安全。使用这个钩子好函数的时候就避免了让页面去判断,省掉了创建一个组建Vue实例。 -
created 发生在
实例创建完成后
,当前阶段已经完成了数据观测
,也就是可以使用数据,更改数据,在这里更改
数据不会
触发updated
函数。可以做一些初始数据的获取,在当前阶段无法
与Dom
进行交互
(因为Dom还没有创建),如果非要想,可以通过vm.$nextTick
来访问Dom。 -
beforeMount发生在
挂载之前
,在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom
已经创建完成
,即将开始渲染。在此时也可以对数据进行更改,不会触发updated。 -
mounted发生在
挂载完成后
,在当前阶段,真实
的Dom
挂载完毕,数据完成双向绑定
,可以访问
到Dom节点
,使用$refs属性对Dom进行操作。 -
beforeUpdate发生在
更新之前
,也就是响应式数据发生更新,虚拟dom重新渲染之前被触发,你可以在当前阶段进行更改数据,不会造成重渲染。 -
updated发生在
更新完成之后
,当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据,因为这可能会导致无限循环的更新。 -
beforeDestroy发生在
实例销毁之前
,在当前阶段实例完全可以被使用,我们可以在这时进行善后收尾工作,比如清除计时器,销毁父组件对子组件的重复监听。beforeDestroy()Bus.$off("saveTheme")
-
destroyed发生在实例销毁之后,这个时候只剩下了dom空壳。组件已被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁。
1-2 生命周期调用顺序
- 组件的调用顺序都是先父后子
- 渲染完成的顺序是先子后父
- 组件的销毁操作是先父后子
- 销毁完成的顺序是先子后父
加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程 父 beforeUpdate -> 父 updated
销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
1-3 vue生命周期的作用是什么
它的生命周期中有多个事件钩子,让我们控制
Vue实例过程更加清晰
。
1-4 第一次页面加载会触发哪几个钩子
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
1-5 每个周期具体适合哪些场景
- beforecreate : 可以在这加个loading事件,在加载实例时触发
- created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
- mounted : 挂载元素,获取到DOM节点
- updated : 如果对数据统一处理,在这里写上相应函数
- beforeDestroy : 可以清除定时器
- nextTick : 更新数据后立即操作dom
vue2.0生命周期详解(前端网备份)
这篇大佬用图文分析详解vue2.0里面的生命周期
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>;
页面中渲染的优先值:
所以综合排名优先级:
render函数选项 > template选项 > outer HTML.
https://segmentfault.com/a/1190000011381906
下面这个链接的console更清晰
https://www.cnblogs.com/caizhenbo/p/6418291.html
简短总结:
beforeCreate 时候:el和data都是underfind
Create 时候做的事情很多:el是underfind,data有值
首先会判断对象是否有el选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)。此时注释掉代码中:
然后,我们往下看,template参数选项的有无对生命周期的影响。
(1).如果vue实例对象中有template参数选项,则将其作为模板编译成render函数。
(2).如果没有template选项,则将外部HTML作为模板编译。
(3).可以看到template中的模板优先级要高于outer HTML的优先级。
修改代码如下, 在HTML结构中增加了一串html,在vue对象中增加了template选项:
所以综合排名优先级:
render函数选项 > template选项 > outer HTML.
beforeMount:
可以看到此时是给vue实例对象添加$el成员,并且替换掉挂在的DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el上还是undefined。
最重要的这一步的差值表达式message是没有被解析的
mounted:
这一步的差值表达式message被解析
当vue发现data中的数据发生了改变,会触发对应组件的重新渲染,先后调用beforeUpdate和updated钩子函数。我们在console中输入:
vm.message = ‘触发组件更新‘
两者区别:
beforeUpdate是检测到data变化但是view还没有重新渲染,并且可以修改data的最后时机,updated是view重新渲染后触发的
eforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
以上是关于前端学习 - Vue 生命周期的主要内容,如果未能解决你的问题,请参考以下文章
2021.6月最新前端面试题总结(JavaScriptHtml5小程序ReactES6Vue.js源码全栈)