keep-alive 理解 如何实现具体缓存的是什么?
在切换组件时,可以保存一些组件不被销毁,防止对其进行多次渲染。
缓存组件,用来达到提升性能的目的。
ps:首页进入到详情页,如果用户每次点击相同的的详情页时,不会进行多次请求,如果点击的不是同一个详情页,则直接请求。
keep-alive中 包含三个属性:
- include - string | RegExp | Array 。只有在名称匹配的组件才会被缓存。
- exclude - string | RegExp | Array 。名称匹配的组件不会被缓存。
- max - string | REgExp | Array 。 最多可以缓存多少个组件实例。
与<transition>相似,<keep-alive>是一个抽象组件,他自身不会渲染一个Dom元素,也不会出现在组件的父组件链中。
当组件在keep-alive中被调用时,它所处的mounted 和 unmounted 生命周期函数不会被调用,取而代之的是 activated 和 decativated 。(只会运用在<keep-alive>的直接子节点以及其所有的子孙节点。)
WARNING:
<keep-alive> 不会在函数式组件中正常工作,因为它们没有缓存实例。