vue キープアライブ コンポーネントの使用法と原則の概要

この記事の内容は、vue keep-alive コンポーネントの使用方法と原理の紹介に関するものであり、一定の参考価値がありますので、困っている友人は参考にしていただければ幸いです。

keep-alive

keep-alive は vue.js の組み込みコンポーネントです。非アクティブなコンポーネントのインスタンスを直接破棄するのではなく、メモリに保存できます。これはコンポーネントの抽象化です。実際の DOM にはレンダリングされず、親コンポーネント チェーンにも表示されません。
これは、exclude と include という 2 つの属性を提供し、コンポーネントを条件付きでキャッシュできるようにします。

使用例

<keep-alive>
    <comment></comment>
</keep-alive>

上記のコメント コンポーネントはキャッシュされます。

<keep-alive>
    <coma v-if="test"></coma>
    <comb v-else></comb>
</keep-alive>
<button @click="abc"></button>

export default{
    data(){
        reurn{
            test:true
        }
    },
    methods:{
        abc(){
            this.test=!this.test;
        }
    }
}

ボタンをクリックするとcomaコンポーネントとcombコンポーネントが切り替わりますが、このとき2つのコンポーネントの状態がキャッシュされます。aコンポーネントとbコンポーネントに入力ラベルがある場合、入力が切り替わりますが、ラベルの値は変わりません。

props

keep-alive コンポーネントには、条件付きキャッシュ用に include と exclude の 2 つの属性があり、どちらもカンマ区切りの文字列、正規表現、または配列で表すことができます。

<keep-alive include="a">
    <component></component>
</keep-alive>
//name名为a的组件会被缓存起来

<keep-alive exclude="a">
    <component></component>
</keep-alive>
//name名为a的组件将不会被缓存。

ライフ フック

keep-alive は、アクティブと非アクティブの 2 つのライフ フックを提供します。
キープアライブはコンポーネントをメモリに保存し、破棄したり再構築したりしないため、コンポーネントの creted メソッドやその他のメソッドは呼び出されません。コンポーネントがアクティブかどうかを判断するには、アクティブ化フックと非アクティブ化フックを使用する必要があります。

キープアライブ コンポーネントの詳細な実装

作成されたフックと破棄されたフック
作成されたフックは、Vnode ノードを保存するためのキャッシュ コンテナーとして使用されるキャッシュ オブジェクトを作成します。

created{
    this.cache=Object.create(null);
}

destroyed フックは、コンポーネントが破棄されると、キャッシュ内のすべてのコンポーネント インスタンスをクリアします。

/* destroyed钩子中销毁所有cache中的组件实例 */
destroyed () {
    for (const key in this.cache) {
        pruneCacheEntry(this.cache[key])
    }
},

次のステップはレンダリング関数です。

render () {
    /* 得到slot插槽中的第一个组件 */
    const vnode: VNode = getFirstComponentChild(this.$slots.default)

    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
        // check pattern
        /* 获取组件名称，优先获取组件的name字段，否则是组件的tag */
        const name: ?string = getComponentName(componentOptions)
        /* name不在inlcude中或者在exlude中则直接返回vnode（没有取缓存） */
        if (name && (
        (this.include && !matches(this.include, name)) ||
        (this.exclude && matches(this.exclude, name))
        )) {
            return vnode
        }
        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
        /* 如果已经做过缓存了则直接从缓存中获取组件实例给vnode，还未缓存过则进行缓存 */
        if (this.cache[key]) {
            vnode.componentInstance = this.cache[key].componentInstance
        } else {
            this.cache[key] = vnode
        }
        /* keepAlive标记位 */
        vnode.data.keepAlive = true
    }
    return vnode
}

まず、getFirstComponentChild を通じて最初のサブコンポーネントを取得し、コンポーネントの名前を取得します (コンポーネント名が存在する場合は、コンポーネント名を直接使用します。それ以外の場合は、タグが使用されます)。次に、include 属性と exclude 属性を使用して名前が照合されます。照合が失敗した場合 (キャッシュが必要ないことを示す)、操作を行わずに vnode が直接返されます。

/* 检测name是否匹配 */
function matches (pattern: string | RegExp, name: string): boolean {
  if (typeof pattern === 'string') {
    /* 字符串情况，如a,b,c */
    return pattern.split(',').indexOf(name) > -1
  } else if (isRegExp(pattern)) {
    /* 正则 */
    return pattern.test(name)
  }
  /* istanbul ignore next */
  return false
}

include 属性と exclude 属性の一致を検出する関数は非常に単純で、include 属性と exclude 属性は、コンポーネント名がカンマと正規表現で区切られた「a,b,c」などの文字列をサポートしています。 matches は、これら 2 つのメソッドを使用して、現在のコンポーネントと一致するかどうかを検出します。

if (this.cache[key]) {
    vnode.componentInstance = this.cache[key].componentInstance
} else {
    this.cache[key] = vnode
}

次は非常に簡単です。キーに従って this.cache を検索します。存在する場合は、以前にキャッシュされたことを意味します。キャッシュされた vnode のcomponentInstance (コンポーネント インスタンス) を現在の vnode に直接上書きします。 vノード。それ以外の場合、vnode はキャッシュに保存されます。
最後に vnode に戻ります (キャッシュがある場合、vnode のコンポーネントインスタンスはキャッシュ内のコンポーネントに置き換えられています)。
watch を使用して、pruneCache および pruneCache プロパティの変更を監視し、変更があった場合にキャッシュ キャッシュ内のキャッシュ データを変更します。

watch: {
    /* 监视include以及exclude，在被修改的时候对cache进行修正 */
    include (val: string | RegExp) {
        pruneCache(this.cache, this._vnode, name => matches(val, name))
    },
    exclude (val: string | RegExp) {
        pruneCache(this.cache, this._vnode, name => !matches(val, name))
    }
},

pruneCache の実装を見てみましょう。

/* 修正cache */
function pruneCache (cache: VNodeCache, current: VNode, filter: Function) {
  for (const key in cache) {
    /* 取出cache中的vnode */
    const cachedNode: ?VNode = cache[key]
    if (cachedNode) {
      const name: ?string = getComponentName(cachedNode.componentOptions)
      /* name不符合filter条件的，同时不是目前渲染的vnode时，销毁vnode对应的组件实例（Vue实例），并从cache中移除 */
      if (name && !filter(name)) {
        if (cachedNode !== current) {
          pruneCacheEntry(cachedNode)
        }
        cache[key] = null
      }
    }
  }
} 

/* 销毁vnode对应的组件实例（Vue实例） */
function pruneCacheEntry (vnode: ?VNode) {
  if (vnode) {
    vnode.componentInstance.$destroy()
  }
}

キャッシュ内のすべてのアイテムをスキャンします。フィルターで指定されたルールを満たさない場合、pruneCacheEntry が実行されます。 pruneCacheEntry は、コンポーネント インスタンスの $destroy メソッドを呼び出してコンポーネントを破棄します。

この記事はここで終了しています。その他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの JavaScript ビデオ チュートリアル 列に注目してください。

以上がvue キープアライブ コンポーネントの使用法と原則の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。