Vue中keep-alive的作用是什么及怎么使用

这篇文章主要介绍“Vue中keep-alive的作用是什么及怎么使用”，在日常操作中，相信很多人在Vue中keep-alive的作用是什么及怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue中keep-alive的作用是什么及怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

一、概念：

keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，该组件将不会销毁。

二、作用：

用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。

三、属性

• include:字符串或正则表达式。只有匹配的组件会被缓存。

• exclude:字符串或正则表达式。任何匹配的组件都不会被缓存。

四、使用场景

比如：有一个列表页面和一个详情页面，那么用户可能会经常执行打开详情 => 返回列表 => 打开详情，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染页面，从而节省内存开销。

五、使用方式:

5.1. 在App.vue中使用keep-alive组件，来缓存所有页面

  <div id="app">
  	<keep-alive>
	    <header-bar></header-bar>
	    <div class="container">
	      <menu></menu>
	      <Main />
	    </div>
	    <footer-bar></footer-bar>
    </keep-alive>
  </div>

5.2. 按条件缓存，使用include，exclude判断是否缓存

5.2.1. 将缓存 name 为 keep的组件，如果有多个，可用逗号分

<keep-alive include='keep'>
  <router-view/>
</keep-alive>

5.2.2. 将不缓存 name 为 nokeep的组件

<keep-alive exclude='nokeep'>
  <router-view/>
</keep-alive>

5.2.3. 还可使用属性绑定动态判断

<keep-alive :include='includedFun'>
  <router-view/>
</keep-alive>

5.3. 在router目录下的index.js中，

5.3.1. 使用meta: { keepAlive = true }, 表示需要缓存

 const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path:'/ login',
    component: Login
  },
   {
      path: '/list',
      component: List,
      meta: {
          isKeep: true
      }
   },
  {
      path: '/detail',
      component: Detail,
      meta:{
          isKeep: true
      }
  }
]

5.3.2. 在App.vue中进行判断

<div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.isKeep"></router-view>
    </keep-alive>
    <router-view></router-view>
  </div>

到此，关于“Vue中keep-alive的作用是什么及怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！