vue中keep-alive缓冲问题

keep-alive 简介

keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
用法也很简单:

<keep-alive>
  <component>
    <!-- 该组件将被缓存! -->
  </component>
</keep-alive>

props

  • include - 字符串或正则表达,只有匹配的组件会被缓存
  • exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
// 组件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}
<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存! -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染
<keep-alive exclude="a">
  <component>
    <!-- 除了 name 为 a 的组件都将被缓存! -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染
<transition name="move" mode="out-in">
             <keep-alive>
                 <router-view></router-view>
             </keep-alive>
          </transition>

 

 

vue-router 之 keep-alive     http://www.jianshu.com/p/0b0222954483

Vue keep-alive实践总结(推荐)      http://www.jb51.net/article/122575.htm

 

posted @ 2017-11-27 10:17  chenguiya  阅读(176)  评论(0)    收藏  举报