keep-alive

keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素

<keep-alive>
<loading></loading>
</keep-laive>

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

被包裹在keep-alive中的组件的状态将会被保留,例如我们将某个列表类组件内容滑动到第100条位置,那么我们在切换到一个组件后再次切换回到该组件,该组件的位置状态依旧会保持在第100条列表处

作者:羊烊羴

链接:https://www.jianshu.com/p/4b55d312d297

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Vue 中的keep-alive 什么用处?的更多相关文章

  1. vue中递归组件的使用

    2019独角兽企业重金招聘Python工程师标准>>> 递归 简单来讲就是程序自己调用自身. vue中的递归组件就是,组件自身调用自身. 父组件 <template> & ...

  2. vue - Vue中的ajax

    只有在ajax才能找回一点点主场了,vue中的ajax一天整完,内容还行,主要是对axios的运用. 明天按理说要开始vuex了,这个从来都是只耳闻没有眼见过,明天来看看看看是个什么神奇的东西. 一. ...

  3. vue中动态引入图片为什么要是require, 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  4. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  5. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  7. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  8. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  9. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

  10. 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面

      v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...

随机推荐

  1. 面试阿里被分布式“搞懵”,Redis、MongoDB、memcached没答上来

    都说大厂面试难,一点也没有错,一线大厂的面试究竟怎么样还得自己亲身经历了才知道.小白面试阿里,就被面试官吊打,一问分布式就被“搞懵”了,Redis.MongoDB.Memcached都没答好,很多没有 ...

  2. [TimLinux] docker CentOS7安装docker-ce最新版

    1. 环境 $ lsb_release -a # 需要安装 redhat-lsb-core 包 LSB Version: :core-4.1-amd64:core-4.1-noarch Distrib ...

  3. CoderForces999F-Cards and Joy

    F. Cards and Joy time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  4. 第一节知识点:.net与c#的概念

    1.什么是.net          .net一般指的是.NET Framework框架,一种平台,一种技术:.NET 是微软的新一代技术平台,以构建互联互通的应用系统.这些应用程序的开发和运行必须有 ...

  5. Python爬虫技术:爬虫时如何知道是否代理ip伪装成功?

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. python爬虫时如何知道是否代理ip伪装成功: 有时候我们的爬虫程序添加了 ...

  6. USB工业摄像头设计之上位机

    在工业相机中对摄像头要求较高,且采集的图像数据要求是源数据,未经过任何处理. 为了兼容xp.win7(32bit 64bit) 程序采用VS2008  MFC编制,参考网上一些应用. CYUSB驱动与 ...

  7. flash存储器原理及作用是什么?

    flash存储器的工作原理 flash存储器又称闪存(快闪存储器),是一种电可擦可编程只读存储器的形式,是可以在操作中被多次擦或写,EEPROM与高速RAM成为当前最常用且发展最快的两种存储技术.计算 ...

  8. linux—ln

    1.  软连接:不可删除源文件,删除源文件导致链接文件找不到,出现红色闪烁. 2.  硬链接:  源文件删除后,链接文件可以正常打开,链接前后的文件inode号相同,硬链接只能针对文件做链接,,不能针 ...

  9. 详谈springboot启动类的@SpringBootApplication注解

    前几天我们学会了如何创建springboot项目今天我们说一下他是怎么运行的为什么不需要我们再去编写繁重的配置文件的 @SpringBootApplication 首先我们看一下这个注解,他是用来标注 ...

  10. Win32_DiskDrive 硬盘 参数说明

    Availability  --设备的状态. BytesPerSector  --在每个扇区的物理磁盘驱动器的字节数. Capabilities  --媒体访问设备的能力阵列. CapabilityD ...