一、keep-alive是什么？

是Vue的内置组件，主要用于保留组件状态或避免重新渲染。

二、使用步骤

1. 基本使用

代码如下（示例）：

<!-- 基本 -->
<keep-alive><component :is="view"></component>
</keep-alive>//当a满足大于1的条件显示comp-a，反之则显示comp-b
<!-- 带条件判断的子组件 -->
<keep-alive><comp-a v-if="a > 1"></comp-a><comp-b v-else></comp-b>
</keep-alive><!-- 和 `<transition>` 一起使用 -->
<transition><keep-alive><component :is="view"></component></keep-alive>
</transition>

2. 允许组件有条件地缓存

代码如下（示例）：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b"><component :is="view"></component>
</keep-alive><!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/"><component :is="view"></component>
</keep-alive><!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive>

3. 缓存组件实例数量限制

max:一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉.

代码如下（示例）：

<keep-alive :max="10"><component :is="view"></component>
</keep-alive>

三、注意事项

keep-alive要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。
<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中.
keep-alive是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染
不会在函数式组件中正常工作，因为它们没有缓存实例。

【Vue 基础知识】keep-alive是什么？怎么用？相关推荐

vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必 ...
Vue基础知识总结(二)：进阶篇
Vue基础知识总结(二):进阶篇 1.0 MVVM模式 MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式. MVVM模式将页面,分层了 M .V.和VM , ...
前端学习——vue基础知识
1. Vue初体验: 1.1 导入开发版本的Vue.js <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ...
vue基础知识（day06）
今日学习目标能够了解组件进阶知识能够掌握自定义指令创建和使用能够完成tabbar案例的开发组件进阶 1.0 组件进阶 - 动态组件目标: 多个组件使用同一个挂载点,并动态切换,这就是动态组件 ...
Vue基础知识总结(一)：基础篇
1.Vue.js 1.1Vue.js介绍 1.1.1 Vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计 ...
Vue基础知识+组件化开发+模块化开发总结
三.内容: 一.MVVM View层视图层,我们前端开发时候的DOM层主要就是给用户展示各种信息 Model层数据层:可能是我们固定的思数据,更多的是来自我们的服务器,在网路上请求下来的数据 V ...
Vue基础知识和案例展示
原文链接 1 Web 概述 Web 三要素:HTML,CSS,JavaScript. HTML 用于控制网页的结构,CSS 用于控制网页的外观,JavaScript 控制的是网页的行为. 1.1 HT ...
vue基础知识（一）
使用vue一段时间,但对有些混乱的地方还不了解,在这里简单的进行一个记录,便于理解与归纳 . 1.生命周期 beforeCreate vue实例的挂载元素$el和数据对象data或者props都为un ...
【Vue基础知识总结 6，我的支付宝3面+美团4面+拼多多四面
js运行在浏览器中的内核中的js引擎内部 Node.js是脱离浏览器环境运行的JavaScript程序,基于V8 引擎(Chrome 的 JavaScript的引擎) 3.服务器端应用开发(了解) 创 ...

【Vue 基础知识】keep-alive是什么？怎么用？

文章目录

一、keep-alive是什么？

二、使用步骤

1. 基本使用

2. 允许组件有条件地缓存

3. 缓存组件实例数量限制

三、注意事项

【Vue 基础知识】keep-alive是什么？怎么用？相关推荐

最新文章

热门文章