Vue的生命周期

理解Vue的生命周期

  生命周期就是一个Vue实例从创建到销毁的过程。在整个生命周期中,Vue也提供了不同的生命周期钩子函数,让用户在适当的时候添加自己的代码。

created()与mounted()的应用场景

  created()是在模板渲染到页面前调用的,它表示Vue实例已创建,可以获取到Vue实例上的各种状态,但无法操作真实DOM;mounted()是在模板渲染到页面后调用的额,表示虚拟DOM已挂载到页面上,在这里可以对DOM进行操作。因此,对数据初始化的操作一般放在created()中,而操作DOM的代码一般放在mounted()中。

 

组件切换时的生命周期变化

  假设某一页面布局如下图所示:

 

 

 父组件与子组件的生命周期顺序

 

  

  可以看到,父组件Posts在挂载到页面之前,会先进行子组件PostPage1的创建与渲染,最后才挂载父组件。

 

切换子组件时的生命周期变化

 

 

   

  在Posts组件中切换子组件,首先会触发Posts组件的更新,然后进行子组件PostPage2的创建以及子组件PostPage1的销毁,最后将子组件PostPage2挂载到页面上,父组件Posts更新完成。

 

 

 

组件切换时的生命周期变化

 

 

   由路由组件Posts切换到Archive后,首先会进行Archive组件的创建,在Archive组件挂载到页面之前,需要对旧组件Posts进行销毁,这里先进行子组件的销毁,最后在销毁父组件。

 

keep-alive

  <keep-alive>是Vue中的内置组件,实现组件切换过程中保存原组件的状态,避免切换时原组件进入销毁阶段以及返回时原组件重新构建,造成原来的状态丢失。使用<keep-alive>时,会引入两个新的生命周期钩子函数:

  • activated:组件切换时,当前激活的组件会触发;
  • deactivated:组件切换时,原组件会触发;

  有时候,我们需要在组件切换的过程中,缓存切换前的组件,保存该组件的数据,防止在返回时需要重新渲染造成数据丢失。比如说,在我项目中的商家点单页面,如果我添加商品到购物车后,切换到商品评价页面查看,然后返回到原来的点单时,想要购物车中的数据仍然存在,需要使用<keep-alive>内置组件对点单页面进行缓存。

 

  我们忽略父组件Posts中的子路由(删除掉),同时为<router-view>外层添加<keep-alive>内置组件,同时加上两个新的钩子函数,观察组件Posts与Archive的切换情况:

1.首次页面加载

 

2.切换到Archive组件

 

 

3.切换回Posts组件

 

 

  可以看到,整个切换过程都不涉及组件的重建与销毁。

 

posted @ 2022-08-09 12:11  ˙鲨鱼辣椒ゝ  阅读(94)  评论(0)    收藏  举报