這篇文章主要講解了“Vue的keep-alive怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue的keep-alive怎么使用”吧！

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、網絡空間、營銷軟件、網站建設、紹興網站維護、網站推廣。

用法

keep-alive是 Vue 的內置組件，當它包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 transition 相似，keep-alive 是一個抽象組件：它自身不會渲染成一個 DOM 元素，也不會出現在父組件鏈中。當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數將會被對應執行。

在 2.2.0 及其更高版本中，activated 和 deactivated 將會在 <keep-alive> 樹內的所有嵌套組件中觸發。

作用

在組件切換過程中將狀態保留在緩存中，防止重復渲染DOM，減少加載時間及性能消耗，優化用戶體驗。（主要用于保留組件狀態或避免重新渲染）

Props

include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。

exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。

max - 數字。最多可以緩存多少組件實例。

生命周期鉤子

activated

在 keep-alive 組件激活時調用（該鉤子函數在服務器端渲染期間不被調用）。

deactivated

在 keep-alive 組件失活時調用（該鉤子在服務器端渲染期間不被調用）。

被包含在 keep-alive 中的組件，會多出兩個生命周期的鉤子：activated 與 deactivated，使用 keep-alive 會將數據保留在緩存中，如果要在每次進入頁面的時候獲取最新的數據，需要在activated 階段獲取數據（因為被包裹的組件只有在首次渲染才會去執行created、mounted等鉤子），承擔原來在created、mounted等鉤子獲取數據的任務。

注意：只有組件被 keep-alive 包裹時，這兩個生命周期函數才會被調用，如果作為正常組件使用，是不會被調用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，這兩個鉤子函數依然不會被調用！另外，在服務端渲染時，此鉤子函數也不會被調用。

示例

緩存（所有）路由組件

App.vue（未使用keep-alive）

<template>

  <div id="app">

    <div id="nav">

      <div class="main-content">

        <router-link to="/home" active-class="isActive">Home</router-link>

        <span>|</span>

        <router-link to="/about" active-class="isActive">About</router-link>

        <div class="router-view-content">

          <!-- 使用 <router-view> 渲染路徑匹配到的視圖組件 -->

          <router-view />

        </div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: "App"

};

</script>

路由組件1：Home.vue

<template>

  <div class="home">

    <p>This is a Home page</p>

    <el-input v-model="inputText" placeholder="請輸入" style="width:50%"></el-input>

  </div>

</template>

<script>

export default {

  name: "Home",

  data() {

    return {

      inputText: "",

    };

  },

};

</script>

路由組件2：About.vue

<template>

  <div class="about">

    <p>This is an About page</p>

    <el-select v-model="value" placeholder="請選擇" style="width: 50%">

      <el-option

        v-for="item in options"

        :key="item.value"

        :label="item.label"

        :value="item.value"

      >

      </el-option>

    </el-select>

  </div>

</template>

<script>

export default {

  name: "About",

  data() {

    return {

      value: "",

      options: [

        {

          value: "zhangsan",

          label: "張三",

        },

        {

          value: "lisi",

          label: "李四",

        },

      ],

    };

  },

};

</script>

在未使用keep-alive情況下，在Home頁面輸入框輸入內容

感謝各位的閱讀，以上就是“Vue的keep-alive怎么使用”的內容了，經過本文的學習后，相信大家對Vue的keep-alive怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！

本文題目：Vue的keep-alive怎么使用
瀏覽路徑：http://m.2m8n56k.cn/article6/jdcdig.html

成都網站建設公司_創新互聯，為您提供軟件開發、定制開發、網站導航、網站營銷、商城網站、動態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯