Vue的生命周期
vue 的生命周期及原理
生命周期中每个钩子里做了什么嘛
为人熟知的
beforeCreated
在这个阶段,new Vue(),只有默认的数据和方法,但是data和methods里面的数据都还没有挂载。数据观测data observer以及event/watcher 也没有被配置,所以一般不在这个阶段做什么操作。
created
官方解释:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
我的解释:创建完实例了,data以及methods里面的方法已经赋值了,但是dom还没加载,所以此时可以先去ajax请求拿到数据,然后给data.
beforeMount
执行到这里的时候,vue创建了一个虚拟dom,但没有挂载到页面中,所以页面不会有更新。
mounted
执行到mounted的时候,el的挂载完毕,dom与数据也匹配完成。此时呈现的页面是新的数据。
如果在created的时候有更新过数据,那么在这里,会触发beforeUpdate,改变虚拟dom,然后触发update改变真实dom,然后页面更新。
beforeDestorey
页面销毁前,此时的data,methods还都存在。可以调用。
destoreyed
页面销毁后,所有的一切不复存在,所以当前组件的一切方法一切数据都拿不到。
beforeUpdate
监听到数据有变化,然后触发beforeUpdate,从而更改虚拟dom
update
虚拟dom更新后,触发update,更新视图真实dom
不常用的
activated
组件激活时用到。这个东西常用于一个页面两个tab,且数据不常发生变化。通过keep-alive,将组件包含进去,缓存到浏览器中,下次再来,不会重新走beforeCreated->mounted这一段路。
deactivated
组件停用时用到。