Vue生命周期
Vue 实例从创建到销毁的过程,就是生命周期。 从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。(在以下流程中,生命钩子函数用加粗表示)
挂载流程
初始化生命周期、事件,但数据代理为开始;
beforeCreate:此时无法通过vm访问到data中的数据以及methods中的方法;
初始化数据监测、数据代理;
created:此时可以通过vm访问到data中的数据,methods中的方法;
Vue开始解析模板,生成虚拟DOM(内存中),页面还不能显示解析好的内容;
beforeMount:此时页面呈现的是未经Vue编译的DOM 结构,所有对DOM的操作都不奏效;
将内存中的虚拟DOM转为真实DOM插入页面;
mounted:此时页面中呈现的是经过Vue编译的DOM,对DOM的操作均有效,至此初始化过程结束,一般在此进行:开启计时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。
更新流程(当页面数据更新时)
beforeUpdate:此时数据时新的,但页面是旧的,即:页面尚未与数据保持同步;
根据新数据生成新的虚拟DOM,随后与旧的虚拟DOM进行比较,最终完成页面更新;
updated:此时数据时新的,页面也是新的,即页面与数据保持同步。
销毁流程(当调用vue.$destroy()时)
beforeDestroy:此时vm中的所有data、methods、指令等等都处于可用状态,马上要执行销毁流程,一般在此阶段,关闭定时器,取消订阅消息、解绑自定义事件等收尾工作;
移除vm实例的监视、子组件以及自定义事件监听
destroy:实例销毁完毕。