vue的生命周期

什么是vue生命周期函数？

vue在关键时刻帮我们调用的一些特殊名称的函数，生命周期就是用来描述一个组件从引入到退出的全过程。

vue生命周期的执行顺序

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

单页面

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

父子组件的生命周期

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