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 相关文章推荐
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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脚本
2006/11/26 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
详解php中的implements 使用
2017/06/13 PHP
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
浅析Python3爬虫登录模拟
2018/02/07 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
python使用folium库绘制地图点击框
2018/09/21 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
大学生村官典型材料
2014/01/12 职场文书
保密承诺书
2014/03/27 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
工人先锋号申报材料
2014/12/29 职场文书
人事任命通知书
2015/04/21 职场文书
党员个人承诺书
2015/04/27 职场文书
如何写通讯稿
2015/07/22 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android