阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js 组件的生命周期

      问题

      Vue组件的生命周期

      答案

      总共分为8个阶段创建前/后,载⼊前/后,更新前/后,销毁前/后

      • 创建前/后: 在 beforeCreate 阶段, vue 实例的挂载元素 el 和数据对象 data 都为undefined ,还未初始化。在 created 阶段, vue 实例的数据对象 data 有了,el还 没有
      • 载⼊前/后:在 beforeMount 阶段, vue 实例的 $el 和 data 都初始化了,但还是挂载之前为虚拟的 dom 节点, data.message 还未替换。在 mounted 阶段, vue 实例挂载完成, data.message 成功渲染。
      • 更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated ⽅法
      • 销毁前/后:在执⾏ destroy ⽅法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在

      要掌握每个生命周期什么时候被调用

      • beforeCreate 在实例初始化之后,数据观测(data observer) 之前被调用。
      • created 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。这里没有$el
      • beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。
      • mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
      • beforeUpdate 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
      • updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
      • beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。
      • destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

      要掌握每个生命周期内部可以做什么事

      • created 实例已经创建完成,因为它是最早触发的原因可以进行一些数据,资源的请求。
      • mounted 实例已经挂载完成,可以进行一些DOM操作
      • beforeUpdate 可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
      • updated 可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。
      • destroyed 可以执行一些优化操作,清空定时器,解除绑定事件

      https://a.axihe.com/focus/vue/08.png

      https://a.axihe.com/focus/vue/08.jpg

      引申的问题

      什么是vue⽣命周期?

      答: Vue 实例从创建到销毁的过程,就是⽣命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等⼀系列过程,称之为 Vue 的⽣命周期。

      vue⽣命周期的作⽤是什么?

      答:它的⽣命周期中有多个事件钩⼦,让我们在控制整个Vue实例的过程时更容易形成好的 逻辑。

      vue⽣命周期总共有⼏个阶段?

      答:它可以总共分为 8 个阶段:创建前/后、载⼊前/后、更新前/后、销毁前/销毁后。

      第⼀次⻚⾯加载会触发哪⼏个钩⼦?

      答:会触发下⾯这⼏个 beforeCreate 、 created 、 beforeMount 、 mounted 。

      DOM 渲染在哪个周期中就已经完成?

      答: DOM 渲染在 mounted 中就已经完成了

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录