框架篇-Vue面试题4-写一下 vue2 实例的生命周期

（这张图是整个vue的生命周期过程）

生命周期函数(钩子函数):在特定的阶段,能够自动执行的函数,总共分为 8 个阶段:创建前/后,载入前/后,更新前/后,销毁前/后

1. beforeCreate阶段: vue实例挂载元素el和数据对象data都为undefined,还未初始化

注意

在当前阶段data,methods,computed以及watch上的数据和方法都不能被访问

应用场景

1. 可以在此时加一些loading效果,在created时进行移除
2. 也可以在此阶段做一些页面拦截,当进入一个路由时,可以判断是否有权限进去,是否安全,携带参数是否完整,参数是否安全,使用好这个钩子的时候就避免了让页面去判断,省掉了创建一个组件vue实例
3. 做自定义重定向,当路由还没有进去时,判断是否正确进去,若不正确则可以重定向到指定的页面
4. 想要在实例化数据之前做什么事情,都可以在这个钩子函数里设置
5. created阶段: vue实例的数据对象data有了,el还没有,在实例创建完成后会被立即调用。在这一阶段，实例已完成,数据观测(data observer)，property 和方法的运算，watch/event 事件回调

然而，挂载阶段还没开始，``$el property`目前尚不可用

在这一阶段可以做一些初始化数据的获取,在当前阶段无法与DOM进行交互,如果非要做,可以通过vm.$nextTick来访问DOM

应用场景: 需要异步请求数据的方法可以在此时执行，完成数据的初始化(Ajax请求放在这个阶段也是可以的)

挂载时

• beforeMount: 在挂载开始之前被调用,相关的render函数首次被调用
• mounted: 实例已经挂载完成,可以进行一些DOM操作

载入前/后

1. beforeUpdate阶段: 在挂载开始之前被调用: 相关的 render 函数首次会被调用,监测到data发生变化,在变化的数据重新渲染视图之前会触发,这也是重新渲染之前最后修改数据的机会 可以在当前阶段进行更改数据,不会造成重渲染
2. updated: 监测到data发生变化,并完成渲染更新视图之后触发,虚拟 DOM 重新渲染和打补丁之后调用,组合新的DOM已经更新,避免在这个钩子函数中操作数据,防止死循环

销毁前/后

1. beforeDestory阶段: 实例销毁前调用,实例还可以用,this能获取到实例,常用于销毁定时器,解绑事件

在当前阶段实例完全可以被使用,我们可以在时进行善后收尾工作,比如:清除计时器

1. destoryed阶段: 实例销毁后调用,调用后所有事件监听器会被移除,所有的子实例都会被销毁,当前阶段组件被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁

在代码里,把这些生命周期函数写上去,打开控制台,测试一下,就知道这些生命周期函数具体的执行顺序了的,还是要理解上面的一张生命周期图谱

如遇到什么问题,也欢迎小伙伴们下方留言,一起学习探讨~