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. 洛谷 3111 [USACO14DEC]牛慢跑Cow Jog_Sliver 题解

    本蒟蒻又来发题解了, 一道较水的模拟题. 题意不过多解释, 思路如下: 在最开始的时候求出每头牛在t秒的位置(最终位置 然后,如果后一头牛追上了前一头牛,那就无视它, 把它们看成一个整体. else ...

  2. luogu P2899 [USACO08JAN]手机网络Cell Phone Network |贪心

    include include include include include include define db double using namespace std; const int N=1e ...

  3. luogu P2672 推销员 |贪心

    题目描述 阿明是一名推销员,他奉命到螺丝街推销他们公司的产品.螺丝街是一条死胡同,出口与入口是同一个,街道的一侧是围墙,另一侧是住户.螺丝街一共有N家住户,第ii家住户到入口的距离为Si米.由于同一栋 ...

  4. js练习- 给你一个对象,求有几层

    // 比如这个a中,就有四层.如何算出这四层 const a = { b: 1, c() {}, d: { e: 2, f: { g: 3, h: { i: 4, }, }, j: { k: 5, } ...

  5. 马拉车manacher

    目的:线性查找一个串的最长回文子串 时间复杂度:O(n) len[i]表示以i为中心的回文串的半径,mx即为当前计算回文串最右边字符的最大值,p是中心点mid,mx-i和2*p-1关于p对称 http ...

  6. 矩阵解压,网络流UESTC-1962天才钱vs学霸周2

    天才钱vs学霸周2 Time Limit: 500 MS     Memory Limit: 128 MB Submit Status 由于上次的游戏中学霸周输了,因此学霸周想出个问题为难天才钱,问题 ...

  7. Tesseract-OCR 字体库下载地址

    https://github.com/tesseract-ocr/tesseract/wiki/Data-Files

  8. Nginx学习一路向西

    Nginx 学习一路向北 Java大猿帅成长手册,GitHub JavaEgg ,N线互联网开发必备技能兵器谱 1. Nginx简介 1.1 Nginx 概述 NGINX是一个免费.开源.高性能.轻量 ...

  9. c语言输入矩阵的对角线之和

    一.程序代码如下 #include<stdio.h> #define M 4 main() { int matrix[][M]={ {1,2,4,5},{2,6,6,7},{8,7,6,5 ...

  10. C语言中表达n次方

    C语言中表达n次方可以用pow函数. 函数原型:double pow(double x, double y) 功    能:计算x^y的值 返 回 值:计算结果 举例: double a; a = p ...