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

组件停用时用到。

观察者模式 双向绑定的深层原理

本文链接:

https://www.calm7.com/article.html?id=5