Vue の組み込みコンポーネントのキープアライブについて理解しましょう

キープアライブとは何ですか?次の記事では、vue 組み込みコンポーネントのキープアライブについての理解を説明します。皆様のお役に立てれば幸いです。

#1. キープアライブとは

キープアライブはvue##です# の組み込みコンポーネントは、コンポーネントの切り替え中に状態をメモリに保持して、DOM のレンダリングが繰り返されるのを防ぐことができます。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

keep-alive

動的コンポーネントをラップする場合、非アクティブなコンポーネントはキャッシュされたインスタンスを破棄する代わりに。

keep-alive

次の props プロパティを設定できます:

include
• - 文字列または正規表現。名前が一致するコンポーネントのみがキャッシュされます。
exclude
• - 文字列または正規表現。名前が一致するコンポーネントはキャッシュされません
max
• - 数値。キャッシュできるコンポーネント インスタンスの最大数

keep-alive

の基本的な使用法について: <pre class='brush:php;toolbar:false;'>&lt;keep-alive&gt; &lt;component :is=&quot;view&quot;&gt;&lt;/component&gt; &lt;/keep-alive&gt;</pre>使用

includes

とexclude: <pre class='brush:php;toolbar:false;'>&lt;keep-alive include=&quot;a,b&quot;&gt; &lt;component :is=&quot;view&quot;&gt;&lt;/component&gt; &lt;/keep-alive&gt; &lt;!-- 正则表达式 (使用 `v-bind`) --&gt; &lt;keep-alive :include=&quot;/a|b/&quot;&gt; &lt;component :is=&quot;view&quot;&gt;&lt;/component&gt; &lt;/keep-alive&gt; &lt;!-- 数组 (使用 `v-bind`) --&gt; &lt;keep-alive :include=&quot;[&amp;#39;a&amp;#39;, &amp;#39;b&amp;#39;]&quot;&gt; &lt;component :is=&quot;view&quot;&gt;&lt;/component&gt; &lt;/keep-alive&gt;</pre> マッチングでは、最初にコンポーネント自体の

name

オプションがチェックされ、name オプションが使用できない場合は、そのローカル登録名と一致します。 (親コンポーネント コンポーネント オプション キー値)、匿名コンポーネントは一致できませんキープアライブ キャッシュが設定されたコンポーネントには、さらに 2 つのライフ サイクル フック (

activated

および deactivated):

初めてコンポーネントに入るとき:

beforeRouteEnter
• > beforeCreate > created> マウント > アクティブ化 > ... ... > beforeRouteLeave > 非アクティブ化コンポーネントに再度入る場合:
beforeRouteEnter
• >activated > ... ... > beforeRouteLeave > deactivated

2. 使用シナリオ

使用原則: 特定のシナリオでページをリロードする必要がない場合は、

keepalive# を使用できます。

## 例:

ホームページ

–>

リストページ–>ビジネス詳細ページ##から移動する場合#–> に戻る。この時点で、リスト ページは homepage–> から keep-alive する必要があります。

リストページ

–>ビジネス詳細ページ–>リストページに戻る(キャッシュが必要)–>ホームページに戻る(キャッシュが必要) )–>もう一度リスト ページにアクセスします (キャッシュする必要はありません)、この時点で、ページの キープアライブ を制御できます。ルーティングに keepAlive 属性を設定して、キャッシュが必要かどうかを決定します。

{
  path: 'list',
  name: 'itemList', // 列表页
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '列表页'
 }
}

Use<keep-alive></keep-alive>

<div id="app" class=&#39;wrapper&#39;>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

3. 原理分析

keep-alive は

vue

に組み込まれたコンポーネントです ソースコードの場所: src/core /components/keep-alive.js<pre class='brush:php;toolbar:false;'>export default { name: &amp;#39;keep-alive&amp;#39;, abstract: true, props: { include: [String, RegExp, Array], exclude: [String, RegExp, Array], max: [String, Number] }, created () { this.cache = Object.create(null) this.keys = [] }, destroyed () { for (const key in this.cache) { pruneCacheEntry(this.cache, key, this.keys) } }, mounted () { this.$watch(&amp;#39;include&amp;#39;, val =&gt; { pruneCache(this, name =&gt; matches(val, name)) }) this.$watch(&amp;#39;exclude&amp;#39;, val =&gt; { pruneCache(this, name =&gt; !matches(val, name)) }) }, render() { /* 获取默认插槽中的第一个组件节点 */ const slot = this.$slots.default const vnode = getFirstComponentChild(slot) /* 获取该组件节点的componentOptions */ const componentOptions = vnode &amp;&amp; vnode.componentOptions if (componentOptions) { /* 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag */ const name = getComponentName(componentOptions) const { include, exclude } = this /* 如果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode */ if ( (include &amp;&amp; (!name || !matches(include, name))) || // excluded (exclude &amp;&amp; name &amp;&amp; matches(exclude, name)) ) { return vnode } const { cache, keys } = this /* 获取组件的key值 */ const key = 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}` : &amp;#39;&amp;#39;) : vnode.key /* 拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存 */ 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) // prune oldest entry /* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */ if (this.max &amp;&amp; keys.length &gt; parseInt(this.max)) { pruneCacheEntry(cache, keys[0], keys, this._vnode) } } vnode.data.keepAlive = true } return vnode || (slot &amp;&amp; slot[0]) } }</pre>コンポーネントには

template

がなく、代わりに

render

が使用され、render が自動的に実行されることがわかります。 コンポーネントがレンダリングされるときの関数。this.cache は、キャッシュする必要があるコンポーネントを保存するために使用されるオブジェクトです。次の形式で保存されます:

this.cache = {
    'key1':'组件1',
    'key2':'组件2',
    // ...
}

コンポーネントが破棄されるときに実行されますpruneCacheEntryfunction

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)
}

inマウントされたフック関数、次のように:

mounted () {
    this.$watch('include', val => {
        pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
        pruneCache(this, name => !matches(val, name))
    })
}

If include または exclude 変更されました。これは、キャッシュする必要があるコンポーネントを定義するためのルールが変更されたことを意味します。キャッシュする必要のないコンポーネントのルールが変更された場合は、pruneCache 関数を実行します。関数は次のとおりです。

function pruneCache (keepAliveInstance, filter) {
  const { cache, keys, _vnode } = keepAliveInstance
  for (const key in cache) {
    const cachedNode = cache[key]
    if (cachedNode) {
      const name = getComponentName(cachedNode.componentOptions)
      if (name && !filter(name)) {
        pruneCacheEntry(cache, key, keys, _vnode)
      }
    }
  }
}

この中の this.cache オブジェクトが関数内で走査され、各項目の name 値が取得され、新しいキャッシュ ルールと一致するために使用されます。一致しない場合は、その値が新しいキャッシュ ルール。コンポーネントをキャッシュ ルールに基づいてキャッシュする必要がなくなった場合は、pruneCacheEntry 関数を呼び出して、

this.cache

オブジェクトからコンポーネントを削除します。 keep-alive について の最も強力なキャッシュ関数は、render 関数 に実装されています。まず、コンポーネントの key 値を取得します。 ##

const key = vnode.key == null? 
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key

get

key 値の後に、this.cache オブジェクトに移動して、この値があるかどうかを確認します。ある場合は、コンポーネントにキャッシュ、つまり、次のようにキャッシュにヒットします:

/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */
    remove(keys, key)
    keys.push(key)
}

直接从缓存中拿 vnode 的组件实例，此时重新调整该组件key的顺序，将其从原来的地方删掉并重新放在this.keys中最后一个

this.cache对象中没有该key值的情况，如下：

/* 如果没有命中缓存，则将其设置进缓存 */
else {
    cache[key] = vnode
    keys.push(key)
    /* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
    if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}

表明该组件还没有被缓存过，则以该组件的key为键，组件vnode为值，将其存入this.cache中，并且把key存入this.keys中

此时再判断this.keys中缓存组件的数量是否超过了设置的最大缓存数量值this.max，如果超过了，则把第一个缓存组件删掉

四、思考题：缓存后如何获取数据

解决方案可以有以下两种：

• beforeRouteEnter
• actived

beforeRouteEnter

每次组件渲染的时候，都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次进入路由执行
        vm.getData()  // 获取数据
    })
},

actived

在keep-alive缓存的组件被激活的时候，都会执行actived钩子

activated(){
   this.getData() // 获取数据
},

注意：服务器端渲染期间avtived不被调用

（学习视频分享：vuejs入门教程、编程基础视频）

以上がVue の組み込みコンポーネントのキープアライブについて理解しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。