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 tags 创建缓存导航的过程实现
Dec 03 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
Vue router配置与使用分析讲解
Dec 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语法(3)
2006/10/09 PHP
PHP 七大优势分析
2009/06/23 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
javascript简易画板开发
2020/04/12 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python动态加载变量示例分享
2014/02/17 Python
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python中协程用法代码详解
2018/02/10 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
高级3D打印市场:Gambody
2019/12/26 全球购物
应用数学专业求职信
2014/03/14 职场文书
股东协议书范本
2014/04/14 职场文书
和解协议书
2014/04/16 职场文书
企业标语口号
2014/06/10 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
刑事起诉书范文
2015/05/19 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers