vue中的keep-alive

时间 2019-12-11

标签 vue alive 繁體版

原文原文链接

本文转载于：http://www.javashuo.com/article/p-parwkcch-mc.htmlhtml

转载仅供我的往后学习vue

http://www.javashuo.com/article/p-ytinhgiq-e.htmlvue-router

keep-alive的做用主要是在组件切换时，保存组件的状态，防止重复渲染引起性能问题。好比：常见的列表页与详情页，当咱们在列表页经过滚动鼠标寻找到本身感兴趣的标题时，点进去进入详情页，当浏览完详情页后返回到列表页，此时咱们但愿返回的列表页不是从新渲染后的列表页，而是咱们以前滚动到的位置，keep-alive 就能够帮助咱们缓存列表页的状态，实现上述效果。keep-alive起到一个缓存做用，用来保存页面的状态（包括数据、操做等）。浏览器

demo实践，感觉keep-alive的做用
demo中定义了两个组件，Page1和Page2。并经过路由实现了两个组件之间的切换。在page1页面的输入框中输入一些内容后，切换到page2页面，再从page2从新切换到page1时，经过keep-alive能够实现输入框中的内容保持不变。
缓存

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>keep-alive</title>
</head>
<body>
  <div id="app">
    <router-link to="/page1">page1</router-link>
    <router-link to="/page2">page2</router-link>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-router"></script>
  <script>
  const Page1 = Vue.extend({
      template: `<div class="page1">
        <h1>page1</h1>
        <input type="text" />
      </div>
      `,
    })
  const Page2 = Vue.extend({
    template: `<div class="page2">
      <h1>page2</h1>
    </div>
    `,
  })

  const routes = [
    {
      path: '/page1',
      component: Page1,
      meta: {
        keepAlive: true,
      }
    },
    {
      path: '/page2',
      component: Page2,
      meta: {
        keepAlive: false,
      }
    },
  ]

  const router = new VueRouter({
    routes,
  })

  const app = new Vue({
    router
  }).$mount('#app')
  </script>
</body>
</html>
---------------------

代码copy到编辑器中保存为.html文件，用浏览器打开观察结果。

上述demo中，经过在路由时，为组件Page1和Page2设置meta的keepAlive状态来控制组件是否须要缓存。app