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做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
javascript模仿msgbox提示效果代码
Jun 10 Javascript
javascript 全等号运算符使用说明
May 31 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
微信小程序文章列表功能完整实例
Jun 03 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
linux php mysql数据库备份实现代码
2009/03/10 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
jQuery动画animate方法使用介绍
2013/05/06 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
Python实现拼接多张图片的方法
2014/12/01 Python
Python中int()函数的用法浅析
2017/10/17 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python如何定义带参数的装饰器
2018/03/20 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Python猜数字算法题详解
2020/03/01 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
经销商培训邀请函
2014/01/21 职场文书
学校卫生检查制度
2014/02/03 职场文书
生日寄语大全
2014/04/08 职场文书
四查四看整改措施
2014/09/19 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
Python 匹配文本并在其上一行追加文本
2022/05/11 Python