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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。