【前端学习 - Vue (3) 生命周期】

1. 生命周期

1-1 基本概念

什么是vue生命周期? Vue 实例创建销毁过程,就是生命周期。

注意:浏览器有8个钩子,但是node中做服务端渲染的时候只有beforeCreatecreated

  • beforeCreatenew 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

猜你喜欢

转载自blog.csdn.net/weixin_60364883/article/details/126715290
今日推荐