vue keep-alive的作用和使用总结

文章目录

• • 1.什么是keep-alive?
  • 2.作用
  • 3.属性
  • 4.场景
  • 5.使用方式
  • • 5-1.App.vue中使用keep-alive组件，缓存所有动态组件
    • 5-2.按条件缓存，`include`，`exclude`判断是否缓存。
    • 5-3.`keepAlive: true`设置缓存

1.什么是keep-alive?

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

2.作用

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

3.属性

• include: 字符串或正则表达式。匹配的对应的组件缓存。
• exclude: 字符串或正则表达式。 匹配的对应的组件不缓存。

4.场景

在用户使用频率比较高的组件进行缓存，减少DOM渲染开销。

5.使用方式

5-1.App.vue中使用keep-alive组件，缓存所有动态组件

  <div id="app">
  	<keep-alive>
	    动态组件……
    </keep-alive>
  </div>

5-2.按条件缓存，include，exclude判断是否缓存。

5-2-1.include 将缓存 name 为 model 的组件，多个用逗号隔开

<keep-alive include='model1,model2……'>
  <router-view/>
</keep-alive>

5-2-2.exclude 将不缓存 name 为 model 的组件

<keep-alive exclude='model1,model2……'>
  <router-view/>
</keep-alive>

5-2-3.动态绑定

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

5-3.keepAlive: true设置缓存

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