Vue生命周期函数与环节

192 阅读2分钟

生命周期:就是函数。 new Vue()

环节1:init Events & Lifecycle :初始化生命周期和事件。看生命周期函数有几个。 但是数据代理还没有开始。 生命周期1: beforeCreate。无法通过vm访问到data中的数据,methods的方法哦。

环节2 init injections reativty:数据检测,数据代理 生命周期2:created。可以通过vm访问到data中的数据,methods的方法。

环节3:是否有el。有就继续。没有就看vm.$mount(e) 环节4:是否有template选项。有template,可以不在div里面写。没有template,就在div里面写,inner+外标签是模板。 此阶段Vue开始解析模板,生产虚拟dom存在内存中,页面还不能显示解析好的内容。 生命周期3 beforeMount。此时页面显示的是未经Vue编译的DOM结构。所有对DOM 的操作,最终都不奏效。

环节5create vm $.el and replace el’ with it:将内存的虚拟DOM转化为真实DOM插入页面。 生命周期4:mounted:挂载完成。此时页面呈现的经过Vue编译的DOM。对DOM的操作都有效,但是尽量可能避免。致辞初始化过程结束,一般都会进行:开启定时器,发送网络请求,消息订阅,绑定自定义事件,初始化操作。

beforeUpdate。当数据改变时候,更新之前。数据是新的,但是页面是旧的。 Vitrual DOM re-render and patch:根洗数据,生产虚拟DOM,随后和旧的虚拟DOM进行比较,最终完成页面更新,也完成model-》view更新。 updated:此时,数据是新的,页面也是新的。

beforeDDestory:vm中所有,data,methods,指令等等,都是可以用的状态。马上要执行销毁过程,一般在此阶段,关闭定时器,取消订阅信息,解绑自定义事件收尾操作。但是dom元素回调函数还在。 Teardow watcher.child component destoryed:最被忽略的函数!!! vm.$destory:走销毁流程,自杀。一般多不会是自杀,都是其他组件使他消除。

生命周期函数,就是不需要自己写函数,vue有函数给你调。不用改在。

总结,创建之前,创建完毕(怀孕了)。 挂载之前,挂载完毕(出生完毕,重要的钩子,开始弄东西)。 更新之前,更新完毕。 销毁之前(重要的钩子),销毁完毕。