曦杨小破站

组件缓存

2022/7/25 VUE2

# 什么是组件缓存？

切换组件时再返回缓存的组件组件不会重新渲染，被缓存的组件加载速度更快，只加载一次,可以使用vue提供的keep-alive标签可实现组件缓存,

<keep-alive>
  <router-view ></router-view>
</keep-alive>

属性:

  • include 定义需要缓存的组件名称
    • include="name1,name2"
  • exclude 定义不需要缓存的组件名称
    • exclude="name1,name2"
    • 优先级比include高
  • max 缓存组件最大的数量
    • max="1"
    • 可动态修改数量

# 组件缓存的优化写法

keep-alive模式是全部缓存，有些不必要组件缓存也没有什么意义，还会造成内存的的消耗

# 在路由表中定义一些标识

{ 
  path: '/', 
  component: () => import('路径'), 
  //是否缓存
  meta: { isKeepAlive: true } 
},

# app.vue判断

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

路由