36.动态组件——keep-alive.html

<!--
  <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
  <keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中
  主要用于保留组件状态或避免重新渲染
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件——keep alive</title>
    <script type="text/javascript"src="vue.js"></script>
</head>
<body>
    <div id="main">
        <keep-alive>
          <component :is="currentView">
            <!-- 非活动组件将被缓存！ -->
          </component>
        </keep-alive>
    </div>
</body>
<script>
    var vm = new Vue({
      el: '#main',
      data: {
        currentView: 'archive'
      },
      components: {
        home: { template:'<h1>1!</h1>' },
        posts: { template:'<h1>2!</h1>' },
        archive: { template:'<h1>3!</h1>' }
      }
    })
</script>
</html>