vue中keep-alive、activated的探讨和使用详解


Posted in Javascript onJuly 26, 2020

在修改公司的一个项目的时候发现了activated这个东西,一直觉得很疑惑,之前也没怎么用过啊!官网的生命周期那也没说过这东西啊!生命周期不就create mount update 和destory这几个东东么,怎么多了个activate出来。

百思不得其解,于是去问了下度娘和查了下文档!恍然大悟,原来这东东是结合keep-alive这东东使用的,下面顺便记录一下。

keep-alive

<keep-alive>包裹动态组件的时候,会缓存不活动的组件实例,而不是摧毁他们。其是一个抽象的组件,自身不会渲染一个DOM元素,也不会出现在父组件链中。

说白了被<keep-alive>包裹的组件其会被缓存

废话不多说直接上例子.

我们现在创建两个子组件conpoment1,compoment2,其内容如下

<template>
 <div class="wrapper">
  <ul class="content"></ul>
  <button class="add" id="add" @click="add">添加子元素</button>
 </div>
</template>

<script>
export default {
 data() {
  return {};
 },
 methods: {
  add() {
   let ul = document.getElementsByClassName("content")[0]; 
   let li = document.createElement("li");
   li.innerHTML = "我是添加的元素";
   ul.appendChild(li);   
  }
 }
};
</script>
<style >
</style>

代码不用解释了吧,就是点击按钮在ul动态添加一个li元素。

接着我们在路由中注册一下,再回到APP.vue中修改一下配置

<template>
 <div id="app">
  <keep-alive>
   <router-view />
  </keep-alive>
</template>

这样我们就会发现,当我们切换路由的时候,我们之前添加的子元素还回保存在那里

vue中keep-alive、activated的探讨和使用详解

如果是这样的话所有的页面都被缓存了,一些需要重新加载不需要缓存的我们可以通过v-for来实现。当然我们可以在路由中设置一个key值来判断组件是否需要缓存,就像下面这样

//index.js
{
   path: '/1',
   name: 'components1',
   component: Components1,
   meta: {
    keepAlive: true  //判断是否缓存
   }
  },
  {
   path: '/2',
   name: 'components2',
   component: Components2,
   meta: {
    keepAlive: false
   }
  },

然后我们的App.vue中只需要判断其keepAlive值即可

<div id="app">
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive" />
</template>

这时候我们回到页面中添加子元素并切换路由就会发现只有components1中的组件有缓存。

activated

先说下这个生命周期钩子,官网说其是在服务器端渲染期间不被调用,

说白了其就是在挂载后和更新前被调用的。但如果该组件中没有使用缓存,也就是没有被<keep-alive>包裹的话,activated是不起作用的。我们直接来试一下就知道了。

//components1中
 created() {
  console.log("1激活created钩子函数");
 },
 activated() {
  console.log("1激活activated钩子函数");
 },
 mounted() {
  console.log("1激活mounted钩子函数");
 }

//components2中
 created() {
  console.log("2激活created钩子函数");
 },
 activated() {
  console.log("2激活activated钩子函数");
 },
 mounted() {
  console.log("2激活mounted钩子函数");
 }

我们在2个组件中分别打印出其钩子函数执行情况。我们可以看到

vue中keep-alive、activated的探讨和使用详解

在执行components1时候其是执行了activated钩子函数的,而components2则没有,因为components2并没有被<keep-alive>包裹,所以其并不会激活该钩子函数。

当我们再切换一次路由的时候又发现了神奇的地方

vue中keep-alive、activated的探讨和使用详解

组件1中只执行activated钩子钩子函数,而组件2则把创建和挂载的钩子函数都执行了。

这就是缓存的原因,components其对组件进行了缓存所以并不会再一次执行创建和挂载。

简单的说activated()函数就是一个页面激活后的钩子函数,一进入页面就触发;

所以当我们运用了组件缓存时,如果想每次切换都发送一次请求的话,需要把请求函数写在activated中,而写在created或mounted中其只会在首次加载该组件的时候起作用。

以上这篇vue中keep-alive、activated的探讨和使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 面向对象之命名空间
May 04 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
js仿京东放大镜效果
Aug 09 Javascript
小程序自定义轮播图圆点组件
Jun 25 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 #Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 #Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 #Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 #Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 #Javascript
vuex分模块后,实现获取state的值
Jul 26 #Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 #Javascript
You might like
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
php自定义时间转换函数示例
2016/12/07 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
PyTorch的torch.cat用法
2020/06/28 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
Android面试题及答案
2015/09/04 面试题
文员岗位职责
2015/02/04 职场文书
导游词之张家界
2019/10/31 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS