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项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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 开发环境配置(测试开发环境)
2010/04/28 PHP
服务器web工具 php环境下
2010/12/29 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
php中error与exception的区别及应用
2014/07/28 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
js查错流程归纳
2012/05/04 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
学习Angularjs分页指令
2016/07/01 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
python实现自动更换ip的方法
2015/05/05 Python
Anaconda入门使用总结
2018/04/05 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
Python基于当前时间批量创建文件
2020/05/07 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
python用700行代码实现http客户端
2021/01/14 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
初中地理教学反思
2014/01/11 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python