面试汇总-Vue-生命周期

1.谈谈生命周期

vue中的生命周期指得是vue从创建到销毁的过程，其本质就是一个hook钩子，当程序运行到某个阶段时进行回调触发。
在vue中，当进行new Vue实例时，会先执行

• initLifecycle 初始化$parent $children

• initEvents 初始化$on $off事件

• initRender 初始化渲染函数createElement

• beforeCreate回调

  • 此时因为props、data、methods、watch、computed等还没有初始化
  • 所以这个阶段无法访问到对应的数据

• initInjections 初始化inject

• initState 初始化props methods data computed watch

• initProvide 初始化provide

• created回调

  • 此时已经初始化完成响应式数据，但因为还没有进行依赖收集，故此时对响应式数据进行操作，不会触发update回调，这里适合做一些数据的初始化
  • 但DOM还没有渲染，所以这里访问不到真实DOM

• $mounted

  • 模板解析生成ast树
  • ast树转换为render函数
  • beforeMounted回调
    • DOM还没有渲染
  • new Worker
    • 触发_render函数，将render函数解析为虚拟DOM
    • 触发_update函数，内部调用patch函数，将虚拟DOM转为真实DOM
    • 此时进行依赖收集
    • 然后将真实DOM挂载
  • mounted回调
    • 此时DOM已经渲染完毕，可以进行DOM操作了

• 若进行数据更新

  • beforeUpdate回调
    • 此时数据已经更新了，但DOM还没有重新渲染
    • 此时无法访问到最新的DOM
  • updated回调
    • 此时DOM已经更新完毕
    • 可以访问到最新的数据和最新的DOM

• 若销毁组件

  • beforeDestroy回调
    • 销毁前，此时data、watch等数据还可以访问
  • destroyed回调
    • 销毁后，此时data、watch等无法访问，但DOM元素仍然在页面上（即可以看到视图，但无法响应式）

2.生命周期的执行顺序

2.1 创建组件

2.1.1 仅父组件

beforeCreate -> created -> beforeMounte -> mounted

2.1.2 父组件和子组件

父组件beforeCreate -> 父组件created -> 父组件beforeMounte -> 子组件beforeCreate -> 子组件created -> 子组件beforeMounte -> 子组件mounted -> 父组件mounted

2.2 更新组件

2.2.1 仅父组件

beforeUpdate -> updated

2.2.2 父组件和子组件

父组件beforeUpdate -> 子组件beforeUpdate -> 子组件updated -> 父组件updated

2.3 组件销毁

2.3.1 仅父组件

beforeDestroy -> destroyed

2.3.2 父组件和子组件

父组件beforeDestroy -> 子组件beforeDestroy -> 子组件destroyed -> 父组件destroyed