vue3 の動的コンポーネントと KeepAlive コンポーネント

動的コンポーネント コンポーネント

<component>動的コンポーネントは、データの変更に応じてさまざまなコンポーネントを動的にロードする方法です。動的コンポーネントを使用すると、コードの複雑さが効果的に軽減され、コンポーネントの再利用性と柔軟性が向上します。

動的コンポーネントは、特別な属性 is を通じて動的ロードを実装し、 is の値はコンポーネントまたはコンポーネント オブジェクトの名前にすることができます。

アプリケーション シナリオ:
たとえば、3 つのページを定義するには、ディストリビューションは Home.vue、Products.vue、Contact.vue で、それぞれホームページ、製品、パーソナル センターに対応し、次に Tabbar.vue を定義します。3 つのメニューがあります。 Tabbar.vue 上のディストリビューションは、ホームページ、製品、およびパーソナル センターです。Tabbar 上の対応するメニューをクリックする必要があり、ページは対応するページに切り替わります。ここでは、動的コンポーネントを使用して動的に切り替えることができますページ

コードは次のとおりです。
App.vue のコード

<template>
  <Tabbar></Tabbar> 
  <component :is="tabs[active]"></component>
</template>
<script setup>
import Tabbar from './components/Tabbar.vue';
import Home from './components/Home.vue';
import Products from './components/Products.vue';
import Contact from './components/Contact.vue';
import {
    
     onMounted,reactive,ref } from 'vue';
import store from './store' 
const active = ref('Home')
const tabs = {
    
    
  Home,
  Products,
  Contact
}
onMounted(() => {
    
    
    // 订阅
    store.subscribe((value)=>{
    
     
      active.value = value 
    })  
})
</script>
<style scoped>
</style>

Tabbar.vue のコード

<template>
  <div>
    <ul>
      <li v-for="item in menuList" :key="item.key" @click="handleClick(item.key)">{
    
    {
    
     item.name }}</li>
      <!-- <li @click="handleClick('Home')">首页</li>
      <li @click="handleClick('Products')">产品</li>
      <li @click="handleClick('Contact')">个人中心</li> -->
    </ul>
  </div>
</template>
<script setup> 
import store from '../store'
import Home from './Home.vue';
const menuList = [
  {
    
    
    key:'Home',
    name:'首页'
  },
  {
    
    
    key:'Products',
    name:'产品'
  },
  {
    
    
    key:'Contact',
    name:'个人中心'
  },
]
function handleClick(value) {
    
    
  // console.log(value);
  store.publish(value)
}
</script>
<style scoped>
ul {
    
    
  position: fixed;
  bottom: 10px;
  height: 50px;
  line-height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  list-style: none;
}
</style>

ここでは JavaScript のサブスクリプション公開メカニズムが使用されています。
src ディレクトリに新しい store.js ファイルを作成します。コードは次のとおりです。

export default {
    
    
  datalist:[],
  //订阅函数
  subscribe(cb) {
    
    
    this.datalist.push(cb)
  },
  //发布函数
  publish(value){
    
     
    this.datalist.forEach(cb=>cb(value))
  }
}

次に、App.vueにstore.jsを導入し、onMounted関数でサブスクリプション関数subscribeを呼び出し、Tabbar.vueにstore.jsを導入し、クリックイベントでpublish関数を呼び出し、publish

デフォルトでは、動的コンポーネントのインスタンスは置換時に破棄されます。これにより、コンポーネント内の変更された状態が失われます。コンポーネントが再度表示されると、初期状態のみを含む新しいインスタンスが作成されます。切り替え時にコンポーネントが破壊されないことを認識する必要がある場合は、vue が提供する組み込みコンポーネント KeepAlive と連携する必要があります。

生き続ける

KeepAlive は、複数のコンポーネント間を動的に切り替えるときに、削除されたコンポーネント インスタンスをキャッシュする機能を持つ組み込みコンポーネントです。動的コンポーネント インスタンスをキャッシュし、複数のレンダリングを回避するための組み込みコンポーネント。動的コンポーネントをKeepAliveコンポーネントでラップすることで、コンポーネントのキャッシュ、再利用、コンポーネントのパフォーマンス向上などの機能を実現できます。

KeepAlive の使用は非常に簡単で、動的コンポーネントを KeepAlive タグで囲むだけです。

  <KeepAlive>
    <component :is="tabs[active]"></component> 
  </KeepAlive>

KeepAlive の包含と除外

KeepAlive は、上記の例のように、デフォルトで KeepAlive 内のすべてのコンポーネント インスタンスをキャッシュします。デフォルトでは、KeepAlive は Home、Products、および Contact コンポーネントをキャッシュします。Contact コンポーネントの代わりに Home コンポーネントと Products コンポーネントのコンテンツをキャッシュしたい場合は、これ
を実装するには、 include または exclude 属性を使用できます。
include値には、キャッシュする必要があるコンポーネントとキャッシュする必要のないコンポーネントを表す文字列、正規表現、関数などを指定できます。exclude

• include: この属性は、キャッシュする必要があるコンポーネントを照合するために使用されます。名前を示す文字列、正規表現、関数を使用できます。コンポーネント オブジェクトを渡し、ブール値を返します。一致するコンポーネントのみがキャッシュされます。

• exclude: この属性は、キャッシュする必要のないコンポーネントを照合するために使用されます。名前、正規表現、または関数を示す文字列を指定できます。コンポーネント オブジェクトを渡し、ブール値を返します。一致したコンポーネントはキャッシュされません。

Home コンポーネントと Products コンポーネントをキャッシュするためのサンプル コードが含まれています

  // 字符串形式
  <KeepAlive include="Home,Products">
    <component :is="tabs[active]"></component> 
  </KeepAlive>
  //正则表达式 (需使用 v-bind)
  <KeepAlive :include="/Home|Products/">
    <component :is="tabs[active]"></component> 
  </KeepAlive>
  //数组形式 (需使用 v-bind)
   <KeepAlive :include="['Home','Products']/">
    <component :is="tabs[active]"></component> 
  </KeepAlive>

除外キャッシュには、Home コンポーネントと Products コンポーネントのサンプル コードが含まれていません

 // 字符串形式
  <KeepAlive exclude="Home,Products">
    <component :is="tabs[active]"></component> 
  </KeepAlive>
  //正则表达式 (需使用 v-bind)
  <KeepAlive :exclude="/Home|Products/">
    <component :is="tabs[active]"></component> 
  </KeepAlive>
  //数组形式 (需使用 v-bind)
   <KeepAlive :exclude="['Home','Products']/">
    <component :is="tabs[active]"></component> 
  </KeepAlive>

ここではvueにおけるダイナミックコンポーネントとKeepAliveコンポーネントの使い方を紹介していますので、気に入った友達、いいね、フォロー、コレクションの追加をお願いします！