vue—Vue生命周期

小叮当的口袋
190 阅读2分钟

一、什么是生命周期

  • 一个组件从创造到销毁的过程，生命周期的意义在于当组件执行到某个阶段时对生命周期函数进行回调，在生命周期函数中实现相应的操作；
  • vue实例从创建到销毁的过程，主要经历以下几步：开始创建→初始化数据→编译模板→挂载DOM→数据更新→销毁。

二、生命周期函数

  • 官方示例图
  • 生命周期函数概览
    • beforeCreate：开始创建实例，但为创建完成时执行的生命周期函数。
    • ⭐created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和methods的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
    • beforeMount：将编译完成的HTML挂载到对应虚拟DOM时执行的生命周期函数（此时页面并没有内容）。
    • ⭐mounted：实例被挂载后调用，这时 el 被新创建的 vm.el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
    • beforeUpdate：数据更新之前执行的生命周期函数
    • updated：数据更新之后执行的生命周期函数
    • beforeDestroy：实例销毁之前执行的生命周期函数
    • destroyed：实例销毁之后执行的生命周期函数
    • activated：⭐keep-alive组件激活时调用
    • deactivated：keep-alive组件停用时调用
  • 生命周期详解
    1. 从Vue对象被实例化后开始，初始化事件和生命周期，此时实例尚未被创建，此时可回调beforecreate函数；
    2. 初始化注入，通过依赖注入导入依赖项，实例创建完成后可回调created函数，此时组件实例创建完成，属性已绑定，但DOM未生成；
    3. 检查vue配置，看是否有el选项
      • 有：看是否有template选项；
      • 没有：使用vm.$mount()去挂载模板。
    4. 检查vue配置中是否有template项
      • 有：编译模板，把vue语法声明的模板编译为浏览器可读的HTML；
      • 没有：被绑定区域的el对象的outerHTML作为template，完成编译。
    5. 编译完成的模板挂载到对应虚拟DOM之前可回调beforeMount函数，此时页面没有内容，再将编译好的HTML替换掉el属性所指向的DOM，挂载到实例之后可以调用mounted函数；
    6. 挂载完成后实时监测数据变化，循环更新DOM，更新之前可回调beforeUpdate函数，更新之后可回调updated函数；
    7. 实例销毁之前可回调beforeDestroy函数，实例销毁之后可回调destroyed函数。

三、面试题

  1. created和mounted有什么区别？
  2. 什么是虚拟DOM？
  3. 介绍一下keep-alive组件
  4. 什么时候使用nextTick？
avatar
文章
阅读
粉丝