31

Vue生命周期

什么是Vue?

Vue框架是MVVM类型的前端框架。它为我们的开发省去操作DOM的繁琐操作,使得开发专注于前端逻辑的实现。Vue的实现使得前端工程化,组件化成为了开发常态,编写一套复用度高的组件是每个Vueer的期望

Vue生命周期

开始
var app = new Vue({})

所有的Vue应用都是从这里开始的,当实例化出Vue对象时就已经进入了Vue的生命周期。

进入的生命周期第一个钩子函数就是beforeCreate。在这之前组件还没有真正的初始化。

beforeCreate之后,Vue对data对象作了getter/setter处理,并且将对象放在一个Observe里面以便于监控对象,另外还有使用initEvents绑定事件

在组件初始化完成后,遇到第二个钩子函数:created。在这个阶段我们可以访问到了data的属性以及绑定的事件

通过了created阶段后组件的生命周期到了beforemount,在这个阶段DOM结构还没有生成,但是已经创建了el,组件挂载的根节点。在beforemount执行完成后开始渲染DOM,执行_render方法,_mount方法,然后会有new出一个watcher对象,形成VNode节点,然后会更新DOM

渲染完毕后组件就会到了下一个生命周期mounted,一般的异步请求都会写在这,这个阶段DOM已经渲染出来了。至此一个组件已经完整的出现在眼前了,但是生命周期却还没有停止。

当组件需要更新的时候生命周期会先到达beforeUpdate,在这个阶段显示数据并没有更新,但是DOM中的数据已经改变了,这是因为双向绑定的关系

走过beforeUpdate组件完成了更新,生命周期走到updated

完成更新后的组件应该被销毁了,beforeDestroy,这个阶段组件还没有被销毁

destroy这个是真正的销毁

若文中有何错误欢迎留言或者到这里留言,蟹蟹

@蛋蛋君


JameHou
595 声望10 粉丝

我只想静静地写着代码,和相爱的人平淡的过完一生