框架篇-Vue面试题4-写一下 vue2 实例的生命周期
虽互不曾谋面,但希望能和您成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号（ID：itclanCoder）
如果不知道如何操作
点击这里,标星不迷路
（这张图是整个vue的生命周期过程）
生命周期函数(钩子函数):在特定的阶段,能够自动执行的函数,总共分为 8 个阶段:创建前/后,载入前/后,更新前/后,销毁前/后
beforeCreate阶段:
vue实例挂载元素el和数据对象data都为undefined,还未初始化
注意
在当前阶段data,methods,computed以及watch上的数据和方法都不能被访问
应用场景
可以在此时加一些
loading效果,在created时进行移除也可以在此阶段做一些页面拦截,当进入一个路由时,可以判断是否有权限进去,是否安全,携带参数是否完整,参数是否安全,使用好这个钩子的时候就避免了让页面去判断,省掉了创建一个组件
vue实例做自定义重定向,当路由还没有进去时,判断是否正确进去,若不正确则可以重定向到指定的页面
想要在实例化数据之前做什么事情,都可以在这个钩子函数里设置
created阶段:vue实例的数据对象data有了,el还没有,在实例创建完成后会被立即调用。在这一阶段，实例已完成,数据观测(data observer)，property和方法的运算，watch/event事件回调
然而，挂载阶段还没开始，``$el property`目前尚不可用
在这一阶段可以做一些初始化数据的获取,在当前阶段无法与DOM进行交互,如果非要做,可以通过vm.$nextTick来访问DOM
应用场景: 需要异步请求数据的方法可以在此时执行，完成数据的初始化(Ajax请求放在这个阶段也是可以的)
挂载时
beforeMount: 在挂载开始之前被调用,相关的
render函数首次被调用mounted: 实例已经挂载完成,可以进行一些
DOM操作
载入前/后
beforeUpdate阶段: 在挂载开始之前被调用: 相关的render函数首次会被调用,监测到data发生变化,在变化的数据重新渲染视图之前会触发,这也是重新渲染之前最后修改数据的机会 可以在当前阶段进行更改数据,不会造成重渲染updated: 监测到data发生变化,并完成渲染更新视图之后触发,虚拟DOM重新渲染和打补丁之后调用,组合新的DOM已经更新,避免在这个钩子函数中操作数据,防止死循环
销毁前/后
beforeDestory阶段: 实例销毁前调用,实例还可以用,this能获取到实例,常用于销毁定时器,解绑事件
在当前阶段实例完全可以被使用,我们可以在时进行善后收尾工作,比如:清除计时器
destoryed阶段: 实例销毁后调用,调用后所有事件监听器会被移除,所有的子实例都会被销毁,当前阶段组件被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁
在代码里,把这些生命周期函数写上去,打开控制台,测试一下,就知道这些生命周期函数具体的执行顺序了的,还是要理解上面的一张生命周期图谱
如遇到什么问题,也欢迎小伙伴们下方留言,一起学习探讨~
记账就用轻记账
公众号（ID：itclanCoder）
码能让您早脱菜籍，文能让您洗净铅华
可能您还想看更多：
Js篇-面试题12-如何解析 URL 提取 params 参数
Js篇-面试题11-比较下for..of与for..in的区别