keep-alive学习笔记

一、作用

　　问题：从A页面到B页面，再返回A页面，A页面会重新调用created的生命钩子，重新请求数据，并重新渲染DOM；

　　keep-alive可以缓存该页面，当返回A页面时不会重新调用created的生命钩子，但是activated 和 deactivated生命钩子会被调用；

　　<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；

二、用法

　　在路由或者组件外套一个keep-alive标签；

　　<keep-alive>

　　　　<router-view></router-view>

　　</keep-alive>

　　include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串或正则表达式来表示：

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

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

　　匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称（父组件 components 选项的键值）。匿名组件不能被匹配。

　　<keep-alive include="essence,firend">

　　　　<router-view></router-view>

　　</keep-alive>

　　name为essence和firend的组件具有keep-alive的效果；

 

　　具体可以看官网介绍：https://cn.vuejs.org/v2/api/?#keep-alive