关于vue的keep-alive组件

场景

目前我们在做的新闻资讯的项目，新闻列表有很多，我们从首页的新闻列表 —> 新闻详情页，

但是返回时，首页的新闻列表并不会停留在我们点击进去的位置，而是重新渲染到第一个，

为了更好的用户体验，我们需要从新闻详情页—>新闻列表时不重新渲染

keep-alive组件

keep-alive：Vue提供的一个内置组件，用来对组件进行缓存，从而节省性能，在组件切换过程中将状态保留在内存中，防止重复渲染DOM；

特性： 一般结合路由和动态组件一起使用，用于缓存组件，
提供了 include属性 [ɪnˈkluːd] 和 exclude属性 [ɪkˈskluːd]，两者都支持 字符串 或 正则表达式；

• include属性：表示只有名称匹配的组件都会被缓存；

• exclude属性：表示任何名称匹配的组件都不会被缓存；

而且，exclude属性的优先级高于include属性;

keep-alive组件有他对应的生命周期函数：

• activated [ˈæktɪveɪtɪd] ：keep-alive组件被激活时执行；

• deactivated [ˌdiːˈæktɪveɪtɪd]：keep-alive组件被移除时执行；

在项目中的使用

1. 直接使用keep-alive包裹路由组件；

<keep-alive>
 <component>
	<!-- 此组件将被缓存！ -->
  </component>
</keep-alive>

2. 全局缓存；

<keep-alive>
  <router-view>
	// 所有的路由中组件豆浆被缓存!
  </router-view>	
</keep-alive>

3. 使用include属性和exclude属性；

// home组件
export default {
  name: 'home',
  data () {
  	return {}
  }
}

<keep-alive include="home">
  <component>
  	// name 为 home 的组件将被缓存!
  </component>
</keep-alive>

<keep-alive exclude="home">
  <component>
  	// 除了 name 为 home 的组件都将被缓存!
  </component>
</keep-alive>

4. 假如只需要router-view中的某一个组件被缓存；

①. 使用include属性和exclude属性；

// 组件home
export default {
  name: 'home',
  data () {
  	return {}
  }
}

<keep-alive include="home">
  <router-view>
  	// 只有路径匹配的 home 组件会被缓存！
  </router-view>
</keep-alive>

// exclude属性的使用同样

	前提：给组件命名 name，不适用大量组件的项目。

②. 给路由配置增加meta属性

	优点：不需要给组件命名 name

const routes = [
  {
    path: '*',
    redirect: '/'
  },
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // true表示需要缓存，false表示不需要缓存
    }
  },
]

<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    // 这里是会被缓存的视图组件！
  </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
  // 这里是不被缓存的视图组件！
</router-view>