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 相关文章推荐
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
javascript中的replace函数(带注释demo)
Jan 07 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
原生js实现表格翻页和跳转
Sep 29 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+MYSQL开发工具及资源收藏
2007/01/02 PHP
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
paypal即时到账php实现代码
2010/11/28 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
Python3中详解fabfile的编写
2018/06/24 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
甜美蛋糕店创业计划书
2014/01/30 职场文书
销售顾问岗位职责
2014/02/25 职场文书
酒店员工培训方案
2014/06/02 职场文书
2014年标准化工作总结
2014/12/17 职场文书
上甘岭观后感
2015/06/10 职场文书
学历证明样本
2015/06/16 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书