关于keep-alive

在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染.

属性

• include字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max数字。最多可以缓存多少组件实例

试例用法

1、会被缓存的组件方法

//  路由name值为 a 的将会被缓存
<keep-alive include='a'>
    <router-view></router-view>
</keep-alive>

路由name值为 a b c 的将会被缓存(多个用‘逗号’分割)
<keep-alive include='a,b,c'>
    <router-view></router-view>
</keep-alive>

//也可以用数组
<keep-alive include="['a', 'b']">
    <router-view></router-view>
</keep-alive>

2、exclude 排除不需要缓存的组件

//user组件将不会被缓存
<keep-alive exclude= "User">
	<router-view></router-view>
</keep-alive>

3、max

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

4、注意

exclude的优先级大于include

<keep-alive include="a,b,c" exclude="a,c">
    <!--只有b会缓存-->
    <router-view></router-view>
  </keep-alive>

两个钩子函数

当使用<keep-alive>的时候，activated与deactivated这两个钩子函数也生效

1、activated

第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next的回调函数之前调用

2、deactivated

使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。

activated 和 deactivated 简单使用（结合better-scroll）

需求

如下图

在用户从首页跳转到分类页面，再从分类页面跳转回到首页的时候，希望首页滚动的位置用户上一次离开的位置

这时，我们就可以使用keep-alive

• 1.给路由外面包裹keep-alive，让home组件切换出去后不被销毁，而是缓存

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

• 2. 在home组件中，我们需要在activated第一次进入组件的时候给他一个固定值

this.saceY 我们应该给他一个初始值 0，这样用户在第一次打开页面的时候默认滚动到顶部

scrollTo是better-scroll自带的一个方法，滚动到一定高度

scrollTo(x轴,y轴,时间)

 activated(){
   // 进入的时候给固定的位置
   this.$refs.scroll.scroll.scrollTo(0,this.saceY,200)
 	},

我们已经将进入的方法定义好了，接下来，应该处理用户离开之前的滚动位置

3. 在deactivated中处理用户将要离开的操作

getScrollY()是实时监听用户滚动位置的Y值，来获得用户最后一次滚动的位置，然后讲获取的y值赋值给上面定义的saceY

deactivated(){
    // 切换出去后给save赋值
 this.saceY = this.$refs.scroll.getScrollY()
 	},

这是遇到的deactivated和activated的使用经历。

---