keep?alive用法和原理是什么，有哪些要點(diǎn)-群英

上一篇：微信小程序彈窗組件怎樣用，實(shí)現(xiàn)步驟包括什么下一篇：Typescript在node.js下用別名無效怎么辦

很多朋友都對“keep?alive用法和原理是什么，有哪些要點(diǎn)”的內(nèi)容比較感興趣，對此小編整理了相關(guān)的知識分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲，那么感興趣的朋友就繼續(xù)往下看吧！

keep-alive可以實(shí)現(xiàn)組件緩存，當(dāng)組件切換時(shí)不會對當(dāng)前組件進(jìn)行卸載。

主要是有include、exclude、max三個(gè)屬性；

前兩個(gè)屬性允許keep-alive有條件的進(jìn)行緩存；

max可以定義組件最大的緩存?zhèn)€數(shù)，如果超過了這個(gè)個(gè)數(shù)的話，在下一個(gè)新實(shí)例創(chuàng)建之前，就會將以緩存組件中最久沒有被訪問到的實(shí)例銷毀掉。

兩個(gè)生命周期activated/deactivated，用來得知當(dāng)前組件是否處于活躍狀態(tài)。

Home.vue

<template>
  <div class="hello">
    <h1>你怎么還在學(xué)習(xí)？?</h1>
    <input placeholder="輸入框" />
    <router-link to="/about">我的人生理想</router-link>
  </div>
</template>

About.vue

<template>
  <div class="hello">
    <h1>我想取老婆 </h1>
  </div>
</template>

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<script>
import Home from './views/Home.vue'
import About from './views/About.vue'
export default {
  components: {
    Home,
    About,
  }
}
</script>

你在輸入框中輸入信息，點(diǎn)擊跳轉(zhuǎn)到另外一個(gè)頁面后，回到該頁面，你會發(fā)現(xiàn)，輸入框中的文字消失了。怎么辦勒

使用 keep-alive 包裹 router-view，同時(shí)指定需要緩存的組件名稱。（PS：請?jiān)谝彺娴慕M件中，寫明 name 屬性，并賦值。不然緩存不生效）

Home.vue

App.vue

<template>
  <div id="app">
    <keep-alive include="Home">
      <router-view/>
    </keep-alive>
  </div>
</template>
<script>
import Home from './views/Home.vue'
import About from './views/About.vue'
export default {
  components: {
    Home,
    About,
  }
}
</script>

結(jié)合 Router，緩存頁面

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      // 需要被緩存
      meta: {
        keepAlive: true
      }
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    },
  ]
})

Home.vue

<script>
export default {
  name: "Home",
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = true;
    next();
  },
};
</script>

App.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

剩下的一些其他特性，可以自行前往官網(wǎng)查閱 cn.vuejs.org/v2/api/#kee…

keep-alive 原理

keep-alive中運(yùn)用了LRU(Least Recently Used)算法。

獲取 keep-alive 包裹著的第一個(gè)子組件對象及其組件名；如果 keep-alive 存在多個(gè)子元素，keep-alive 要求同時(shí)只有一個(gè)子元素被渲染。所以在開頭會獲取插槽內(nèi)的子元素，調(diào)用 getFirstComponentChild 獲取到第一個(gè)子元素的 VNode。
根據(jù)設(shè)定的黑白名單（如果有）進(jìn)行條件匹配，決定是否緩存。不匹配，直接返回組件實(shí)例（VNode），否則開啟緩存策略。
根據(jù)組件ID和tag生成緩存Key，并在緩存對象中查找是否已緩存過該組件實(shí)例。如果存在，直接取出緩存值并更新該key在this.keys中的位置（更新key的位置是實(shí)現(xiàn)LRU置換策略的關(guān)鍵）。
如果不存在，則在this.cache對象中存儲該組件實(shí)例并保存key值，之后檢查緩存的實(shí)例數(shù)量是否超過max設(shè)置值，超過則根據(jù)LRU置換策略刪除最近最久未使用的實(shí)例（即是下標(biāo)為0的那個(gè)key）。最后將該組件實(shí)例的keepAlive屬性值設(shè)置為true。

var KeepAlive = {
  name: 'keep-alive',
  // 抽象組件
  abstract: true,
  // 接收的參數(shù)
  props: {
    include: patternTypes,
    exclude: patternTypes,
    max: [String, Number]
  },
  // 創(chuàng)建緩存表
  created: function created () {
    this.cache = Object.create(null);
    this.keys = [];
  },
  destroyed: function destroyed () {
    for (var key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys);
    }
  },
  mounted: function mounted () {
    var this$1 = this;
    this.$watch('include', function (val) {
      pruneCache(this$1, function (name) { return matches(val, name); });
    });
    this.$watch('exclude', function (val) {
      pruneCache(this$1, function (name) { return !matches(val, name); });
    });
  },
  render: function render () {
    var slot = this.$slots.default;
    // 獲取 `keep-alive` 包裹著的第一個(gè)子組件對象及其組件名； 
    // 如果 keep-alive 存在多個(gè)子元素，`keep-alive` 要求同時(shí)只有一個(gè)子元素被渲染。
    // 所以在開頭會獲取插槽內(nèi)的子元素，
    // 調(diào)用 `getFirstComponentChild` 獲取到第一個(gè)子元素的 `VNode`。
    var vnode = getFirstComponentChild(slot);
    var componentOptions = vnode && vnode.componentOptions;
    if (componentOptions) {
      // check pattern
      var name = getComponentName(componentOptions);
      var ref = this;
      var include = ref.include;
      var exclude = ref.exclude;
      // 根據(jù)設(shè)定的黑白名單（如果有）進(jìn)行條件匹配，決定是否緩存。   
      if (
        // not included
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
      // 不匹配，直接返回組件實(shí)例（`VNode`），否則開啟緩存策略。
        return vnode
      }
      var ref$1 = this;
      var cache = ref$1.cache;
      var keys = ref$1.keys;
      // 根據(jù)組件ID和tag生成緩存Key
      var key = vnode.key == null
        ? componentOptions.Ctor.cid + (componentOptions.tag ? ("::" + (componentOptions.tag)) : '')
        : vnode.key;
      if (cache[key]) {
      // 并在緩存對象中查找是否已緩存過該組件實(shí)例。如果存在，直接取出緩存值
        vnode.componentInstance = cache[key].componentInstance;
        // 并更新該key在this.keys中的位置（更新key的位置是實(shí)現(xiàn)LRU置換策略的關(guān)鍵）。
        remove(keys, key);
        keys.push(key);
      } else {
       // 如果不存在，則在this.cache對象中存儲該組件實(shí)例并保存key值，
        cache[key] = vnode;
        keys.push(key);
        // 之后檢查緩存的實(shí)例數(shù)量是否超過max設(shè)置值，超過則根據(jù)LRU置換策略刪除最近最久未使用的實(shí)例
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode);
        }
      }
		// 最后將該組件實(shí)例的keepAlive屬性值設(shè)置為true。
      vnode.data.keepAlive = true;
    }
    return vnode || (slot && slot[0])
  }
};

以上就是關(guān)于“keep?alive用法和原理是什么，有哪些要點(diǎn)”的介紹了，感謝各位的閱讀，如果大家想要了解更多相關(guān)的內(nèi)容，歡迎關(guān)注群英網(wǎng)絡(luò)，小編每天都會為大家更新不同的知識。

標(biāo)簽： keep?alive用法

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。

上一篇：微信小程序彈窗組件怎樣用，實(shí)現(xiàn)步驟包括什么下一篇：Typescript在node.js下用別名無效怎么辦