Exemples détaillés d'utilisation des composants keep-alive des composants intégrés de vue.js

keep-alive est un composant intégré de Vue.js. Cet article présente principalement l'utilisation du composant keep-alive, un composant intégré de vue.js. Les amis dans le besoin peuvent se référer à

keep-alive est un composant intégré de Vue.js. Lors de l'encapsulation de composants dynamiques, les instances de composants inactifs sont mises en cache au lieu d'être détruites. Il ne restitue pas un élément DOM par lui-même et n'apparaît pas non plus dans la chaîne de composants parent. Lorsqu'un composant est basculé dans , ses deux fonctions de hook de cycle de vie, activées et désactivées, seront exécutées en conséquence. Il fournit deux attributs, inclure et exclure, qui permettent aux composants d'être mis en cache de manière conditionnelle.

Par exemple

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

Lorsque vous cliquez sur le bouton, les deux entrées basculent. , mais à ce moment, l'état des deux zones de saisie sera mis en cache et le contenu de la balise d'entrée ne disparaîtra pas en raison du changement de composant.

* include - chaîne ou expression régulière. Seuls les composants correspondants seront mis en cache.
* exclure - chaîne ou expression régulière. Tous les composants correspondants ne seront pas mis en cache.

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

Cache uniquement les composants dont le nom de composant est un

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

À l'exception du composant portant le nom a, tout le reste est mis en cache

Hook de cycle de vie

Le hook de vie keep-alive fournit le deux crochets de vie sont activés et désactivés.

Étant donné que keep-alive enregistrera le composant en mémoire et ne le détruira ni ne le recréera, la création et les autres méthodes du composant ne seront pas rappelées. Vous devez utiliser les hooks de vie activés et désactivés pour. savoir si le composant est actif.

Implémentation approfondie du composant keep-alive

En regardant le code source du composant vue--keep-alive, vous pouvez obtenir ce qui suit information

Le hook créé créera un objet de cache, qui est utilisé comme conteneur de cache pour enregistrer les nœuds vnode.

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

Le hook détruit efface toutes les instances de composant dans le cache lorsque le composant est détruit.

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

:::démo

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}` : '')
  : 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))
 })
},

 : ::

En regardant le code source de Vue, nous pouvons voir que keep-alive passe 3 attributs par défaut, include, exclure, max, max et la longueur maximale pouvant être mise en cache

Combiné avec le code source, nous pouvons implémenter une vue de routeur mise en cache Configurer la mise en cache

<!--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 根据项目是否需要缓存的页面数量多少来决定-->

Créez un keepAliveConf.js et placez le nom du composant qui doit correspondre

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

Configurer la méthode globale de réinitialisation du cache

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

Appelez ceci .resetKeepAive(name) au moment approprié, déclenchez keep-alive pour détruire les instances de composants

Vue.js extrait en interne les nœuds DOM dans les nœuds VNode ; Les composants vivants sont également basés sur les nœuds VNode au lieu de stocker directement la structure DOM. Il met en cache les composants qui remplissent les conditions dans l'objet de cache, puis retire le nœud vnode de l'objet de cache et le restitue lorsqu'il doit être restitué.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!