VUE keep-alive理解分享

在vue中keep-alive能够被经常使用到，下面总结下使用方法、技巧、概念

1.通常用来包裹组件使用，本身没有意义，不会产生任何可视的元素，与component一起使用

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

2.在包裹组件时可以默认缓存组件，所谓缓存组件是指组件会保持一个状态不变，而不会在切换时重新挂载渲染等

3.props: [include, exclude, max]

• include：指定缓存的组件，其中指定的是组件的name
• exclude：指定不缓存某个组件，其中指定的是组件的name
• max：指定最多缓存多少组件，达到最大值的时候会把最开始缓存的替换掉

4.上面缓存可以结合路由来缓存页面

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

5.在keep-alive包裹下的组件可能会有两个钩子函数被触发

• activated：当前组件处于焦点状态时会触发当前钩子，被缓存的组件可以用此来替代mounted（组件不会重新挂载）
• deactivated：当前组件失去焦点状态时触发
• 注意：以上两个钩子函数只有在被缓存时才会有用，使用exclude忽略缓存组件时，并不会触发上面的钩子函数