vue的生命周期是vue中的一个重点难点。同时也是面试的一个必考点
vue有10个生命周期。分别是beforecreate、created、beforemount、mounted、beforeupdate、update、activated、deactivated、beforedestroy、destroy。
其中,除了mounted生命周期函数,其余的生命周期函数在服务端渲染期间都不能被调用。
beforedcreated:是在实例初始化以后,数据观测以后和event/wtach的事件配置之前被调用。(注意:watch是检测到值的变化执行回调,并且在回调过程中执行逻辑操作。使用的场景是我们需要执行复杂的逻辑操作。而computer则是一个计算属性,并且其计算值具有缓存性,且依赖于其他属性的计算值,当计算值发生变化时才返回内容。使用的场景是我们需要依赖于其他属性的计算值的变化来动态获取值的时侯)
created:这是指实例创建完成以后。在这一步,实例已经完成:数据观测、属性、方法的运算、watcher/event事件回调。然而,挂载还未开始,$el属性目前还不可见。
beforemount:在挂载开始之前调用该钩子函数,相关的render函数首次被调用。
mounted:是el被创建的vm.$el被替换,并且挂载到实例上去以后,调用该钩子函数。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内。
而在生命周期created、以及生命周期mounted中可以使用ajax请求。但是当在生命周期中created中,此时还未挂载dom,所以不能拿到真实的dom。而在mounted中,则可以直接操作dom。
注意:由于created在服务端渲染时不能被调用,所以我们统一在mounted中使用ajax请求
beforeupdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。在这个钩子函数中,可以进一步更改状态,并且不会触发附加的重渲染过程
update:由于这个这个数据的更改导致了虚拟DOM重新渲染和打补丁,在这以后会调用该钩子,当这个钩子被调用时,组件已经更新,所以可以依赖于DOM操作。然而在大多数情况下,应避免在这个期间更改状态,因为这可能导致无限循环
activated: 当组件keep-alive激活时被调用
deactivated:当组件keep-alive停用时被调用
beforedestroy:实例销毁之间使用。此时,实例还可以被调用。
destroy:实例销毁以后调用。调用之后,vue实例指示的所有的东西解绑、事件监听移除、子实例销毁、清除自己定义的定时器