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 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 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分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php获取url参数方法总结
2014/11/13 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python操作mysql代码总结
2018/06/01 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
军训心得体会
2013/12/31 职场文书
四议两公开实施方案
2014/03/28 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
西游记读书笔记
2015/06/25 职场文书
Python软件包安装的三种常见方法
2022/07/07 Python
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js