vue keep-alive无法对iframe缓存

　　为什么使用keep-alive缓存iframe界面会失败呢？

 

　　什么是 Keep-alive

• keep-alive 是 vue 中的内置组件，能够在组件切换过程中将状态保留在内存中，防止重复的渲染 DOM；
• keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们；
• keep-alive 可以设置一下 props 属性：

1. include - 字符串或者是正则表达式。只有名称匹配的组件才能被缓存
2. exclude - 字符串或者是正则表达式。
3. max - 数字。最多可以缓存多少组件实例。

　　关于 keep-alive 的基本用法

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

　　使用 <keep-alive>

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

 

vue中的keep-alive

　　Vue 的缓存机制并不是直接存储 DOM 结构，而是将 DOM 节点抽象成了一个个 VNode节点。

　　Vue 的 keep-alive 缓存也是基于 VNode节点 而不是直接存储 DOM 节点。在需要渲染的时候从Vnode渲染到真实DOM上。

iframe中keep-alive机制失效原因

　　iframe页里的内容并不属于节点的信息，所以使用keep-alive依然会重新渲染iframe内的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口，即使把节点保存下来，在渲染时iframe页还是刷新的。

缓存iframe实现方法

　　不使用 keep-alive ，因为vnode原理不适用。直接把打开过得iframe中的dom保存下来。通过v-show显示隐藏

 

　　--学无止境，爱拼才会赢