本文转载于：https://blog.csdn.net/xum222222/article/details/80322532

转载仅供个人日后学习

https://www.cnblogs.com/jinzhenzong/p/7885643.html

keep-alive的作用主要是在组件切换时，保存组件的状态，防止重复渲染引发性能问题。比如：常见的列表页与详情页，当我们在列表页通过滚动鼠标寻找到自己感兴趣的标题时，点进去进入详情页，当浏览完详情页后返回到列表页，此时我们希望返回的列表页不是重新渲染后的列表页，而是我们之前滚动到的位置，keep-alive 就可以帮助我们缓存列表页的状态，实现上述效果。keep-alive起到一个缓存作用，用来保存页面的状态（包括数据、操作等）。

demo实践，感受keep-alive的作用
  demo中定义了两个组件，Page1和Page2。并通过路由实现了两个组件之间的切换。在page1页面的输入框中输入一些内容后，切换到page2页面，再从page2重新切换到page1时，通过keep-alive可以实现输入框中的内容保持不变。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>keep-alive</title>

</head>

<body>

  <div id="app">

    <router-link to="/page1">page1</router-link>

    <router-link to="/page2">page2</router-link>

    <keep-alive>

      <router-view v-if="$route.meta.keepAlive"></router-view>

    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive"></router-view>

  </div>

  <script src="https://unpkg.com/vue"></script>

  <script src="https://unpkg.com/vue-router"></script>

  <script>

  const Page1 = Vue.extend({

      template: `<div class="page1">

        <h1>page1</h1>

        <input type="text" />

      </div>

      `,

    })

  const Page2 = Vue.extend({

    template: `<div class="page2">

      <h1>page2</h1>

    </div>

    `,

  })

  const routes = [

    {

      path: '/page1',

      component: Page1,

      meta: {

        keepAlive: true,

      }

    },

    {

      path: '/page2',

      component: Page2,

      meta: {

        keepAlive: false,

      }

    },

  ]

  const router = new VueRouter({

    routes,

  })

  const app = new Vue({

    router

  }).$mount('#app')

  </script>

</body>

</html>

---------------------
  • 代码copy到编辑器中保存为.html文件，用浏览器打开观察结果。

上述demo中，通过在路由时，为组件Page1和Page2设置meta的keepAlive状态来控制组件是否需要缓存。

vue中的keep-alive的更多相关文章

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

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

  2. vue中的重要特性

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

  3. Vue中comoputed中的数据绑定

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

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

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

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

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

  6. vue中watched属性

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

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

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

  8. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  9. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  10. Vue中之nextTick函数源码分析

    Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...

随机推荐

  1. nodejs:导出Excel和解析导入的Excel

    用的是koa2框架,但好好处理一下,用express框架也是可以的.导出的Excel是xlsx的格式,解析导入Excel的有xlsx和csv格式.通常导入Excel是要上传的,然后获取文件的路径,这里 ...

  2. MyBatis探究-----传递参数详解

    1.单个参数 mybatis不会做特殊处理,#{参数名/任意名}:取出参数值 例如:接口中方法 public Employee getEmpById(String empId); XML中 <s ...

  3. 菜鸟redis初学

    该随笔为本人自学redis所遇到的错误,写这些初衷完全是为了避免以后犯相同的错误,如果对别人有帮助,那就相互促进. 在Java中使用redis,首先你的Jdk要能运行,如果没配置好,网上有很多jdk环 ...

  4. Centos7下安装配置elasticsearch 6.3.1

    1)下载 Elasticsearch 6.3.1 地址:https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.3.1 ...

  5. html中div标签怎么用？

    div现在一般网页的布局都是使用的div+css来布局,div的话,就是通过. <div> <div><p></p></div> </ ...

  6. 自制操作系统Antz(9)——实现内核 (下) 实现图形化界面

    Antz系统更新地址: https://www.cnblogs.com/LexMoon/category/1262287.html Linux内核源码分析地址:https://www.cnblogs. ...

  7. 01: 腾讯云API-云服务器

    1.1 云服务器 1.腾讯云SDK使用举例 网址:https://cloud.tencent.com/document/sdk/Python #! /usr/bin/env python # -*- ...

  8. MATLAB 均方根误差MSE、两图像的信噪比SNR、峰值信噪比PSNR、结构相似性SSIM

    今天的作业是求两幅图像的MSE.SNR.PSNR.SSIM.代码如下: clc; close all; X = imread('q1.tif');% 读取图像 Y=imread('q2.tif'); ...

  9. Educational Codeforces Round 48 (Rated for Div. 2)

    http://codeforces.com/contest/1016 A. 没想到这个也会TLE,太粗心了 B. 暴力就好了,多情况讨论又出错... 思路跟我一样的解法   为什么我做了那么多讨论,原 ...

  10. 中间件详解，Django复习

    day74 2018-05-21 课程安排周一: 中间件 auth模块+分析BBS项目需求(小组讨论把表结构设计出来) 1. 今日内容 中间件:http://www.cnblogs.com/liwen ...