vue中activated的用法


Posted in Vue.js onJanuary 03, 2021

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中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中activated的用法

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

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

vue中activated的用法

组件1中只执行activated钩子钩子函数,而组件2则把创建和挂载的钩子函数都执行了。
这就是缓存的原因,components其对组件进行了缓存所以并不会再一次执行创建和挂载。

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

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

补充:

keep-alive组件除了actived,还有deactived函数钩子

activated

类型:func

触发时机:keep-alive组件激活时使用;

deactivated

类型:func

触发时机:keep-alive组件停用时调用;

以上就是vue中activated的用法的详细内容,更多关于vue activated用法的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue实现登录功能
Dec 31 #Vue.js
vue 实现图片懒加载功能
Dec 31 #Vue.js
vue 动态创建组件的两种方法
Dec 31 #Vue.js
Vue 修改网站图标的方法
Dec 31 #Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 #Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 #Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 #Vue.js
You might like
用PHP读取IMAP邮件
2006/10/09 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
利用python实现AR教程
2019/11/20 Python
python、Matlab求定积分的实现
2019/11/20 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
护士试用期自我鉴定
2014/02/08 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2015年教学工作总结
2015/04/02 职场文书
学历证明样本
2015/06/16 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书