vue 生命周期

vue的生命周期

什么是vue生命周期函数？
生命周期就是用来描述一个组件从创建到销毁的全过程。

面试题

• vue生命周期
• 父子组件触发生命周期函数的顺序

vue生命周期的执行顺序

通过vm对象来代理data对象中属性的操作
data中所有的属性，最后都出现在vm身上
挂载指的是将虚拟DOM生成真实DOM的过程。

整个流程
初始化操作 - 模板编译模板 - 挂载阶段 - 已挂载 - 卸载阶段

• beforeCreate 初始化之前
  • 初始化实例的属性、数据：$parent, $children, $refs, $root, _watcher…等
  • 初始化事件：$on, $off, $emit, $once
• beforeCreate 初始化事件和生命周期函数。此时data中所有的属性，还没有代理到vm对象上，所以获取不到data
  • 初始化组件数据：props, data, methods, watch, computed
• created 数据监测、数据代理创建完毕。可以通过vm访问到data、computed、watch、methods上的方法和数据。
• beforeMount 挂载前状态，vue开始解析模板，在内存中生成虚拟DOM,并将其编译成Render。
• mounted 挂载结束，内存中的虚拟DOM已经转换成了真实DOM显示在页面，同时真实DOM会被保存在vm.$el上方便复用。
• beforeUpdate 更新之前，页面是旧页面但是数据已经是新数据了
• updated 更新完毕之前会根据新数据生成新的虚拟DOM，触发patch过程，更新视图。此时数据和页面都是新的了。
• beforeDestroy销毁之前可以关闭定时器、取消消息订阅、解绑自定义事件等首尾操作
• destroyed 销毁之后。

父子组件生命周期执行顺序

挂载阶段：父组件beforeCreate->父组件created->父组件beforeMount->子组件beforeCreate->子组件created-子组件beforeMount->子组件mounted-> -> 父组件 mounted
更新阶段：父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated
销毁阶段：父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destroyed -> 父组件 destroyed

总结

1. 所有的生命周期钩子自动绑定 this 上下文到实例中