vue中的keep-alive
本文转载于：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的更多相关文章
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
- Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- vue中watched属性
watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...
- 七、vue中v-for有时候对页面不会重新渲染，数组变化后如何到渲染页面
v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- Vue中之nextTick函数源码分析
Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...
随机推荐
- WCF基础二
1:地址 . WCf 的每一个服务都有一个唯一地址,地址包括传输协议和服务位置. HTTP:采用http\https协议进行传输,默认端口为80. TCP:采用ne.tcp协议进行传输,默认端口为80 ...
- log4j2教程【RollingFileAppender】
说明 rollover 表示的是当日志文件大小满足指定大小后,就生成一个新的文件的过程. RollingFileAppender RollingFileAppender是一个OutputStreamA ...
- STD函数的内部计算公式
各股票软件的标准差函数STD是不同的,而布林线的上下轨是以STD为基础计算出来的,所以使用布林线应小心.以2008/3/28的上证综指为例,利用如下代码:"收盘价3日STD:STD(CLOS ...
- 孙子兵法的计是最早的SWOT分析，《孙子兵法》首先不是战法，而是不战之法。首先不是战胜之法，而是不败之法
孙子兵法的计是最早的SWOT分析,<孙子兵法>首先不是战法,而是不战之法.首先不是战胜之法,而是不败之法 在打仗之前,你要详细地去算. 计算的目的是什么呢?孙子说,是为了知胜,就是为了知道 ...
- vue-cli —— 项目打包及一些注意事项
打包方法: 1.把绝对路径改为相对路径:打开config/index.js 会看到一个build属性,这里就是我们打包的基本配置了.在这里可以修改打包的目录,打包的文件名.最重要的是一定要把绝对目录改 ...
- C# 创建数据库和表
using (SqlCommand command2 = new SqlCommand("CREATE TABLE bases(id int IDENTITY(1, 1) PRIMARY K ...
- CentOS与Win7远程桌面互通
在CentOS上装上Rdesktop即可连接Windows,如下命令,第一次执行时报错,提示CredSSP required by server. [root@localhost ~]# rdeskt ...
- %zsy %lqs 随感
今天是cj的大毒瘤zsy(对对,您说的都对,题目不难的啦,是我太菜啦)出题. 我校选手lqs仍然坚持高水平的发挥,wzy神犇却不在状态. 面对T1sb题(其实干了2h)和T3的原题(我&lqs ...
- 你不知道的JS（3）来聊聊this
为什么要使用this?什么是this? 来看一段代码 function identify() { return this.name.toUpperCase(); } function speak() ...
- bzoj 3473 字符串 - 后缀数组 - 树状数组
题目传送门 传送门 题目大意 给定n个字符串,询问每个字符串有多少子串(不包括空串)是所有n个字符串中至少k个字符串的子串 先用奇怪的字符把所有字符串连接起来. 建后缀树,数每个节点的子树内包含多少属 ...