Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Beispiele für die Verwendung von Keep-Alive-Komponenten der integrierten Komponenten von vue.js

Detaillierte Beispiele für die Verwendung von Keep-Alive-Komponenten der integrierten Komponenten von vue.js

无忌哥哥
无忌哥哥Original
2018-07-12 14:02:451756Durchsuche

Keep-Alive ist eine integrierte Komponente von Vue.js. In diesem Artikel wird hauptsächlich die Verwendung der Keep-Alive-Komponente vorgestellt, einer integrierten Komponente von Vue.js. Freunde in Not können sich darauf beziehen.

Keep-Alive ist eine integrierte Komponente von Vue.js. 7c9485ff8c3cba5ae9343ed63c2dc3f7 Beim Umschließen dynamischer Komponenten werden inaktive Komponenteninstanzen zwischengespeichert und nicht zerstört. Es rendert kein DOM-Element selbst und erscheint auch nicht in der übergeordneten Komponentenkette. Wenn eine Komponente innerhalb von 0a8c88b74c0d4e7d53c6011e2896741d umgeschaltet wird, werden ihre beiden Lebenszyklus-Hook-Funktionen, aktiviert und deaktiviert, entsprechend ausgeführt. Es stellt zwei Attribute bereit, include undexclude, die das bedingte Zwischenspeichern von Komponenten ermöglichen.

Zum Beispiel

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

Wenn auf die Schaltfläche geklickt wird, werden die beiden Eingänge umgeschaltet, aber At Dieses Mal wird der Status der beiden Eingabefelder zwischengespeichert und der Inhalt im Eingabe-Tag verschwindet nicht aufgrund des Komponentenwechsels.

* include – Zeichenfolge oder regulärer Ausdruck. Nur passende Komponenten werden zwischengespeichert.
* ausschließen – Zeichenfolge oder regulärer Ausdruck. Alle übereinstimmenden Komponenten werden nicht zwischengespeichert.

<keep-alive include="a">
 <component></component>
</keep-alive>

Nur ​​Komponenten zwischenspeichern, deren Komponentenname ein ist

<keep-alive exclude="a">
 <component></component>
</keep-alive>

Außer Für die Komponente mit dem Namen a wird alles andere zwischengespeichert

Lebenszyklus-Hooks

Life-Hook keep-alive stellt zwei Life-Hooks bereit, bzw. aktiviert und deaktiviert.

Da Keep-Alive die Komponente im Speicher speichert und sie nicht zerstört oder neu erstellt, werden die Erstellungs- und andere Methoden der Komponente nicht erneut aufgerufen. Sie müssen die beiden Life-Hooks von aktiviert verwenden und deaktiviert, um die aktuelle Situation zu erfahren.

Detaillierte Implementierung der Keep-Alive-Komponente


Sehen Sie sich den Quellcode der Vue--Keep-Alive-Komponente an, um die folgenden Informationen zu erhalten

Der erstellte Hook erstellt ein Cache-Objekt, das als Cache-Container zum Speichern von Vnode-Knoten verwendet wird.

props: {
 include: patternTypes,
 exclude: patternTypes,
 max: [String, Number]
},
created () {
 // 创建缓存对象
 this.cache = Object.create(null)
 // 创建一个key别名数组(组件name)
 this.keys = []
},

destroyed Hook löscht alle Komponenteninstanzen im Cache, wenn die Komponente zerstört wird.

destroyed () {
 /* 遍历销毁所有缓存的组件实例*/
 for (const key in this.cache) {
  pruneCacheEntry(this.cache, key, this.keys)
 }
},

:::demo

render () {
 /* 获取插槽 */
 const slot = this.$slots.default
 /* 根据插槽获取第一个组件组件 */
 const vnode: VNode = getFirstComponentChild(slot)
 const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
 if (componentOptions) {
 // 获取组件的名称(是否设置了组件名称name,没有则返回组件标签名称)
 const name: ?string = getComponentName(componentOptions)
 // 解构对象赋值常量
 const { include, exclude } = this
 if ( /* name不在inlcude中或者在exlude中则直接返回vnode */
  // not included
  (include && (!name || !matches(include, name))) ||
  // excluded
  (exclude && name && matches(exclude, name))
 ) {
  return vnode
 }
 const { cache, keys } = this
 const key: ?string = vnode.key == null
  // same constructor may get registered as different local components
  // so cid alone is not enough (#3269)
  ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : &#39;&#39;)
  : vnode.key
 if (cache[key]) { // 判断当前是否有缓存,有则取缓存的实例,无则进行缓存
  vnode.componentInstance = cache[key].componentInstance
  // make current key freshest
  remove(keys, key)
  keys.push(key)
 } else {
  cache[key] = vnode
  keys.push(key)
  // 判断是否设置了最大缓存实例数量,超过则删除最老的数据,
  if (this.max && keys.length > parseInt(this.max)) {
  pruneCacheEntry(cache, keys[0], keys, this._vnode)
  }
 }
 // 给vnode打上缓存标记
 vnode.data.keepAlive = true
 }
 return vnode || (slot && slot[0])
}
// 销毁实例
function pruneCacheEntry (
 cache: VNodeCache,
 key: string,
 keys: Array<string>,
 current?: VNode
) {
 const cached = cache[key]
 if (cached && (!current || cached.tag !== current.tag)) {
 cached.componentInstance.$destroy()
 }
 cache[key] = null
 remove(keys, key)
}
// 缓存
function pruneCache (keepAliveInstance: any, filter: Function) {
 const { cache, keys, _vnode } = keepAliveInstance
 for (const key in cache) {
 const cachedNode: ?VNode = cache[key]
 if (cachedNode) {
  const name: ?string = getComponentName(cachedNode.componentOptions)
  // 组件name 不符合filler条件, 销毁实例,移除cahe
  if (name && !filter(name)) {
  pruneCacheEntry(cache, key, keys, _vnode)
  }
 }
 }
}
// 筛选过滤函数
function matches (pattern: string | RegExp | Array<string>, name: string): boolean {
 if (Array.isArray(pattern)) {
 return pattern.indexOf(name) > -1
 } else if (typeof pattern === &#39;string&#39;) {
 return pattern.split(&#39;,&#39;).indexOf(name) > -1
 } else if (isRegExp(pattern)) {
 return pattern.test(name)
 }
 /* istanbul ignore next */
 return false
}
// 检测 include 和 exclude 数据的变化,实时写入读取缓存或者删除
mounted () {
 this.$watch(&#39;include&#39;, val => {
 pruneCache(this, name => matches(val, name))
 })
 this.$watch(&#39;exclude&#39;, val => {
 pruneCache(this, name => !matches(val, name))
 })
},

:::

Wenn wir uns den Vue-Quellcode ansehen, können wir sehen, dass Keep-Alive standardmäßig drei Attribute übergibt: Einschließen, Ausschließen, Max, Max, die maximale zwischenspeicherbare Länge

In Kombination mit dem Quellcode haben wir kann einen Router mit konfigurierbarer Cache-Ansicht implementieren

<!--exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。-->
<!--TODO 匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称-->
<keep-alive :exclude="keepAliveConf.value">
 <router-view class="child-view" :key="$route.fullPath"></router-view>
</keep-alive>
<!-- 或者 -->
<keep-alive :include="keepAliveConf.value">
 <router-view class="child-view" :key="$route.fullPath"></router-view>
</keep-alive>
<!-- 具体使用 include 还是exclude 根据项目是否需要缓存的页面数量多少来决定-->

Erstellen Sie eine keepAliveConf.js und platzieren Sie den Komponentennamen, der übereinstimmen muss

// 路由组件命名集合
 var arr = [&#39;component1&#39;, &#39;component2&#39;];
 export default {value: routeList.join()};

Konfigurieren Sie die globale Methode zum Zurücksetzen des Caches

import keepAliveConf from &#39;keepAliveConf.js&#39;
Vue.mixin({
 methods: {
 // 传入需要重置的组件名字
 resetKeepAive(name) {
  const conf = keepAliveConf.value;
  let arr = keepAliveConf.value.split(&#39;,&#39;);
  if (name && typeof name === &#39;string&#39;) {
   let i = arr.indexOf(name);
   if (i > -1) {
    arr.splice(i, 1);
    keepAliveConf.value = arr.join();
    setTimeout(() => {
     keepAliveConf.value = conf
    }, 500);
   }
  }
 },
 }
})

Rufen Sie this.resetKeepAive(name) zum richtigen Zeitpunkt auf Keep-Alive auslösen, um die Komponenteninstanz zu zerstören;

Vue.js abstrahiert DOM-Knoten intern in VNode-Knoten. Der Cache der Keep-Alive-Komponente basiert ebenfalls auf VNode-Knoten anstatt die DOM-Struktur direkt zu speichern. Es speichert die Komponenten, die die Bedingungen erfüllen, im Cache-Objekt zwischen, nimmt dann den Vnode-Knoten aus dem Cache-Objekt und rendert ihn, wenn er erneut gerendert werden muss.

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele für die Verwendung von Keep-Alive-Komponenten der integrierten Komponenten von vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn