描述下对Vue生命周期的理解

  • 指的是Vue中实例从创建到销毁的一个完整的过程。
  • 可以理解从 创建 -> 初始化数据 -> 编译template -> 挂在DOM -> 渲染 -> 更新渲染 -> 卸载
  • 生命周期的钩子（Hook）函数：
    • beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
    • 其他：activated、deactivated（这两个是在keep-alive组件激活和停用时触发），另外还有一个errorCaptured
  • 钩子函数是如何把各个生命周期串联到一起的
    • 首先，通过 new Vue()来创建一个空的实例对象：const vm = new Vue()
    • 实例初始化 init，然后将 事件events 和 生命周期lifecycle 注入到实例对象中去
    • 此时会调用 beforeCreate
    • 完成响应式 reactivity，创建注入 injection，注入&校验
    • 调用 created
    • 判断当前的 elemennt 元素有没有 el 属性
      • 如果有，continue
      • 如果没有，vm.$mount(el)后继续下一步
    • 判断有没有 template 属性
      • 如果有，则将 template 编译到 render 函数中（渲染）
      • 如果没有，则把当前 el 的 outHTML 当作是 template 并进行编译
    • 调用 beforeMount，注意，模板已经编译好了，但是页面未更新
    • 创建 vm.$el 替换掉 $el
    • 此时调用 mounted，在 DOM 上已经完成了渲染
    • 若更新发生：
      • 先调用 beforeUpdate
      • VDOM 的 re-render 和 patch
      • 调用 updated，此时页面上的数据就已经是更新后的数据了
    • 销毁实例，调用 beforeDestroy，在此时，实例是可以使用的，包括 data、methods、filter、directives 都是可以使用
    • 解除绑定，销毁子组件，销毁事件监听
    • 触发destroyed，实例的所有内容都被销毁，无法被调用
  • 各个生命周期钩子函数的应用场景
    • beforeCreate - 加载 loading 事件
      • 在 new 一个 vue 实例后，只有一些默认的生命周期钩子函数，其他的东西含没有被创建。在此生命周期执行的时候，data 和 methods 都没有初始化，所以没有办法调用。
    • created - 结束 loading 事件，调用异步请求
      • 被创建的 data 和 methods 已经初始化好了，可以调用了。
    • beforeMount - 在内存中已经编译好了模板了，但是还没有挂载到页面上，此时页面还是旧的
    • mounted - 获取 DOM 节点
      • vue 实例已经完成初始化了。此时组件脱离了创建阶段，进入了运行阶段。此时就可以操作页面上的 DOM 节点。
      • 此时不能异步请求，否则会导致 DOM 更新，从而导致页面抖动
    • beforeUpdate - 页面更新前，此时页面上显示的数据还是旧的，data 中的数据是更新后的，此时 View 和 Model 数据暂时不同步
    • updated - 如果对数据统一处理，在这个周期触发相关函数
      • 页面更新完成，此时 View 和 Model 的数据已经完成同步了
    • beforeDestroy - 可以做一个确认停止事件的确认框
      • 组件销毁前，组件从运行阶段进入了销毁阶段，此时页面上的 data 、methods 、 指令、过滤器还都是可以继续使用的状态
    • destroyed - 组件销毁，组件的所有属性方法无法被调用
    • nextTick - 更新数据后立即操作 DOM
  • 一些额外的知识
    • DOM渲染在哪个周期中已经完成：
      • mounted
    • created 和 mounted 的区别：
      • created：在模板渲染成 html 前调用，即通常初始化某些属性值，然后再渲染成视图。
      • mounted：在模板渲染成 html 后调用，通常是初始化页面完成后，再对 html 的 DOM 节点进行一些需要的操作。
  • 一图流
    lifecycle.png