父子生命周期

110 阅读2分钟

5ccd16fe2d1942e699bde7a7971c26a2_tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp 我们可以看到beforeCreate是最先的,并且在此时的状态下,我们打印的信息什么都拿不到。

之后进入了created状态,在这个状态中我们的el,也就是Dom元素依旧是拿不到的,但是我们已经可以拿到data了,这意味着 created已经将数据加载进来了 ,已经为这个Vue实例开辟了内存空间。

beforeMount,挂载前状态,在我的理解挂载就是将虚拟Dom转变成真实Dom的过程,所以在这之前,我们的el当然还是拿不到的。

mounted,挂载结束,意味着虚拟Dom已经挂载在了真实的元素上,所以从此开始我们就可以拿到el了。我们可以用console.dir去打印一些我们需要的元素的属性。 每当我们去点击改变页面元素的时候,就会进入更新阶段,也就是beforeUpdate,updated这两个状态。 mounted:  虚拟Dom已经被挂载到真实Dom上,此时我们可以获取Dom节点,$ref在此时也是可以访问的。 beforeDestroy:  在Vue实例销毁之前被调用,在此时我们的实例还未被销毁。

在此时可以做一些操作,比如销毁定时器,解绑全局事件,销毁插件对象等

由此可得,在父组件挂载前阶段,子组件已经挂载完成了。

不光是挂载阶段,其他两个阶段我们也可以打印出来,但是在这里我就不细说了,直接上结论:

  • 挂载阶段:父组件 beforeMount -> 子组件 created -> 子组件 mounted -> 父组件 mounted
  • 更新阶段:父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated
  • 销毁阶段:父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destroyed -> 父组件 destroyed 请求不管放在哪里,数据返回也都是mounted之后了,所以尽早请求是可以的 如果不在created 里异步请求,在mounted里面请求 由于dom已经渲染出来了,有可能导致画面抖动。如果在created里面请求不但请求快而且 此时dom还未渲染,不会造成页面抖动。