本文整理來自深入Vue3+TypeScript技術(shù)棧-coderwhy大神新課喇勋，只作為個人筆記記錄使用，請大家多支持王紅元老師偎行。

切換組件案例

比如我們現(xiàn)在想要實現(xiàn)了一個功能：點擊一個tab-bar川背，切換不同的組件顯示贰拿。

這個案例我們可以通過兩種不同的實現(xiàn)思路來實現(xiàn)：
方式一：通過v-if來判斷，顯示不同的組件渗常；
方式二：動態(tài)組件的方式；

v-if顯示不同的組件

我們可以先通過 v-if 來判斷顯示不同的組件汗盘，這個可以使用我們之前講過的知識來實現(xiàn)：

動態(tài)組件的實現(xiàn)

動態(tài)組件是使用 component 組件皱碘，通過一個特殊的attribute is 來實現(xiàn)：

這個currentTab的值可以是通過app.component函數(shù)注冊的全局組件，也可以是在一個組件對象的components屬性中注冊的局部組件隐孽。

動態(tài)組件的傳值和監(jiān)聽事件

動態(tài)組件的傳值和監(jiān)聽事件和父子組件之間的通信是一模一樣的癌椿，只需要將動態(tài)組件當(dāng)成一個子組件即可，只需要將屬性和監(jiān)聽事件放到component上來使用即可菱阵。

比如：父組件通過name踢俄、age屬性給子組件傳值，子組件通過$emit觸發(fā)事件晴及，父組件通過監(jiān)聽pageClick事件得到子組件傳遞的值都办。

keep-alive

我們先對之前的案例中About組件進行改造：在其中增加了一個按鈕，有點擊按鈕可以遞增的功能虑稼。

比如我們將counter點到10琳钉，那么在切換到home再切換回來about時，狀態(tài)是否可以保持呢蛛倦？
答案是否定的歌懒，這是因為默認情況下，我們在切換組件后溯壶，about組件會被銷毀掉及皂，再次回來時會重新創(chuàng)建組件。

但是且改，在開發(fā)中某些情況我們希望繼續(xù)保持組件的狀態(tài)验烧，而不是銷毀掉，這個時候我們就可以使用一個內(nèi)置組件：keep-alive又跛。

keep-alive有一些屬性：

include：string | RegExp | Array噪窘。只有名稱匹配的組件會被緩
存；
exclude：string | RegExp | Array效扫。任何名稱匹配的組件都不
會被緩存倔监；
max：number | string。最多可以緩存多少組件實例菌仁，一旦達
到這個數(shù)字浩习，那么緩存組件中最近沒有被訪問的實例會被銷毀；

include 和 exclude 允許組件有條件地緩存济丘，二者都可以用逗號分隔字符串谱秽、正則表達式或一個數(shù)組來表示洽蛀，匹配首先檢查組件自身的 name 屬性。

緩存組件的生命周期

對于緩存的組件來說疟赊，再次進入時郊供，我們是不會執(zhí)行created或者mounted等生命周期函數(shù)的。但是有時候我們確實希望監(jiān)聽到何時重新進入到了組件近哟，何時離開了組件驮审，這個時候我們可以使用activated 和 deactivated 這兩個生命周期鉤子函數(shù)來監(jiān)聽。

Webpack的import函數(shù)分包

默認情況下吉执，在構(gòu)建整個組件樹的過程中疯淫，因為組件和組件之間是通過模塊化直接依賴的，那么webpack在打包時就會將組件模塊打包到一起（比如一個app.js文件中）戳玫，隨著項目的不斷龐大熙掺，app.js文件的內(nèi)容過大，會造成首屏的渲染速度變慢咕宿。

如下：app.后面是文件的hash值币绩，hash值和文件變化有關(guān)系，.map文件是映射文件府阀，chunk-vendors是第三方的包类浪。

所以，對于一些不需要立即使用的組件肌似，我們可以單獨對它們進行拆分费就，拆分成一些小的代碼塊chunk.js，這些chunk.js會在需要時從服務(wù)器加載下來川队，并且運行代碼力细。

通過import函數(shù)導(dǎo)入的模塊，后續(xù)webpack對其進行打包的時候就會進行分包的操作固额，也就是會打包成chunk.js眠蚂，如下：

// 以前我們這么導(dǎo)入模塊, 這樣模塊的代碼會被打包到app.js里面
// import {sum} from './12_異步組件的使用/utils/math';
// console.log(sum(20, 30));

// 通過import函數(shù)導(dǎo)入的模塊, 后續(xù)webpack對其進行打包的時候就會進行分包的操作, 也就是會打包成chunk.js
import("./12_異步組件的使用/utils/math").then((res) => {
  console.log(res.sum(20, 30))
})

Vue中實現(xiàn)異步組件

如果我們的項目過大了，對于某些組件我們希望通過異步的方式來進行加載（目的是可以對其進行分包處理）斗躏，那么Vue中給我們提供了一個函數(shù)：defineAsyncComponent逝慧。

defineAsyncComponent接受兩種類型的參數(shù)：
類型一：工廠函數(shù)，該工廠函數(shù)需要返回一個Promise對象啄糙；
類型二：接受一個對象類型笛臣，對異步函數(shù)進行配置；

類型一工廠函數(shù)的寫法：上面我們知道了import函數(shù)會返回一個Promise對象隧饼，所以我們直接寫一個工廠箭頭函數(shù)沈堡，然后把返回的Promise對象當(dāng)做defineAsyncComponent函數(shù)的參數(shù)即可。

// import AsyncCategory from './AsyncCategory.vue';
const AsyncCategory = defineAsyncComponent(() => import("./AsyncCategory.vue"))
export default {
  components: {
    AsyncCategory
  }
}

類型二對象類型的寫法：使用對象類型的方式可以進行更詳細的配置燕雁。

const AsyncCategory = defineAsyncComponent({
  //也就是上面的工廠函數(shù)
  loader: () => import("./AsyncCategory.vue"),
  //加載過程顯示的組件
  loadingComponent: Loading,
  //加載失敗顯示的組件
  errorComponent: Error,
  // 在顯示loadingComponent組件之前, 等待多長時間, 默認200ms
  delay: 2000,
  //加載組件的超時時間,如果超過這個值,則顯示錯誤組件, 默認Infinity永不超時, 單位ms
  timeout:0, 
  //定義組件是否可以掛起, 默認true
  suspensible:true,
  /** 異步組件加載失敗的回調(diào)函數(shù)
   * err: 錯誤信息,
   * retry: 函數(shù), 調(diào)用retry嘗試重新加載
   * fail: 函數(shù), 指示加載程序結(jié)束退出
   * attempts: 記錄嘗試的次數(shù)
   */
  onError: function(err, retry, fail, attempts) {
  }
})

這樣寫之后AsyncCategory就是一個異步組件了诞丽，在打包的時候webpack也會對其進行分包處理鲸拥，然后等到真正需要顯示這個組件的時候才去服務(wù)器上下載組件代碼，然后再顯示僧免。

一般開發(fā)中我們很少如上這么用刑赶，因為我們以后會學(xué)到路由，以后基本上都是路由懶加載組件懂衩。

異步組件和Suspense結(jié)合使用

注意：目前（2021-06-08）Suspense是一個實驗性的特性撞叨，API隨時可能會修改。

Suspense是一個內(nèi)置的全局組件勃痴，該組件有兩個插槽：

• default：如果default可以顯示谒所，那么顯示default的內(nèi)容热康；
• fallback：如果default無法顯示或者還沒顯示沛申，那么會顯示fallback插槽的內(nèi)容；

實際項目中異步組件是服務(wù)端獲取的姐军，有可能比較慢铁材，所以我們可以使用Suspense組件，優(yōu)先顯示默認內(nèi)容奕锌，如果默認內(nèi)容加載失敗或者還沒顯示著觉，則顯示fallback插槽的內(nèi)容，如下：

<suspense>
  <template #default>
    <async-category></async-category>
  </template>
  <template #fallback>
    <loading></loading>
  </template>
</suspense>

$refs的使用

在Vue開發(fā)中我們是不推薦進行DOM操作的惊暴，但是某些情況下饼丘，我們在組件中想要直接獲取到元素對象或者子組件實例，這個時候辽话，我們可以給元素或者組件綁定一個ref的屬性肄鸽。

組件實例有一個$refs屬性，它是一個持有注冊過 ref 屬性 的所有 DOM 元素和組件實例的對象油啤。

<template>
  <div>
    <!-- 綁定到一個元素上 -->
    <h2 ref="title">哈哈哈</h2>
    <!-- 綁定到一個組件實例上 -->
    <nav-bar ref="navBar"></nav-bar>
    <button @click="btnClick">獲取元素或組件</button>
  </div>
</template>

<script>
  import NavBar from './NavBar.vue';

  export default {
    components: {
      NavBar
    },
    data() {
      return {
        names: ["abc", "cba"]
      }
    },
    methods: {
      btnClick() {
        //獲取dom元素
        console.log(this.$refs.title);
        //獲取組件數(shù)據(jù)
        console.log(this.$refs.navBar.message);
        //調(diào)用組件方法
        this.$refs.navBar.sayHello();
        //獲取組件的根元素通過$el
        console.log(this.$refs.navBar.$el);
      }
    }
  }
</script>
<style scoped>
</style>

$parent和$root

在子組件中典徘，我們可以通過$parent來訪問父元素，通過$root來訪問根組件益咬。項目中使用的比較少逮诲，因為會導(dǎo)致組件耦合性太強。

注意：在Vue3中已經(jīng)移除了$children的屬性幽告，所以不可以使用了梅鹦。

認識生命周期

什么是生命周期呢？
每個組件都可能會經(jīng)歷從創(chuàng)建冗锁、掛載帘瞭、更新、卸載等一系列的過程蒿讥，在這個過程中的某一個階段蝶念，我們可能會想要添加一些屬于自己的代碼邏輯（比如組件創(chuàng)建完后就請求一些服務(wù)器數(shù)據(jù)）抛腕。但是我們?nèi)绾慰梢灾滥壳敖M件正在哪一個過程呢？Vue給我們提供了組件的生命周期函數(shù)媒殉。

生命周期函數(shù)是一些鉤子函數(shù)担敌，在某個時間會被Vue源碼內(nèi)部進行回調(diào)，通過對生命周期函數(shù)的回調(diào)廷蓉，我們可以知道目前組件正在經(jīng)歷什么階段全封，那么我們就可以在該生命周期中編寫屬于自己的邏輯代碼了。

生命周期的流程

<template>
  <div>
    <h2 ref="title">{{message}}</h2>
    <button @click="changeMessage">修改message</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "Hello Home"
      }
    },
    methods: {
      changeMessage() {
        this.message = "你好啊, 李銀河"
      }
    },
    beforeCreate() {
      console.log("home beforeCreate");
    },
    created() {
      console.log("home created");
    },
    beforeMount() {
      console.log("home beforeMount");
    },
    mounted() {
      console.log("home mounted");
    },
    beforeUpdate() {
      console.log(this.$refs.title.innerHTML);
      console.log("home beforeUpdate");
    },
    updated() {
      console.log(this.$refs.title.innerHTML);
      console.log("home updated");
    },
    beforeUnmount() {
      console.log("home beforeUnmount");
    },
    unmounted() {
      console.log("home unmounted");
    }
  }
</script>
<style scoped>
</style>

組件的v-model

前面我們在input中可以使用v-model來完成雙向綁定桃犬，這樣往往會非常方便刹悴，因為v-model默認幫助我們完成了兩件事：v-bind:value的數(shù)據(jù)綁定和@input的事件監(jiān)聽。

<input v-model="message">
<!-- 等價于 -->
<input :value="message" @input="message = $event.target.value">

如果我們現(xiàn)在封裝了一個組件攒暇，其他地方在使用這個組件時土匀，是否也可以使用v-model來同時完成這兩個功能呢？也是可以的形用，vue也支持在組件上使用v-model就轧。

當(dāng)我們在組件上使用的時候，等價于如下的操作：

<!-- 組件上使用v-model -->
<hy-input v-model="message"></hy-input>
<hy-input :modelValue="message" @update:modelValue="message = $event"></hy-input>

我們會發(fā)現(xiàn)和input元素不同的只是屬性的名稱和事件觸發(fā)的名稱而已田度。

組件v-model的實現(xiàn)

那么妒御，為了我們的HyInput組件可以正常的工作，這個組件內(nèi)的 <input> 必須：
① 將其 value attribute 綁定到一個名叫 modelValue 的 prop 上镇饺；
② 在其 input 事件被觸發(fā)時乎莉，將新的值通過自定義的 update:modelValue 事件拋出；

HyInput.vue的組件代碼如下：

組件使用的時候：

通過computed實現(xiàn)

我們依然希望在組件內(nèi)部按照雙向綁定的做法去完成奸笤，應(yīng)該如何操作呢惋啃？
我們可以使用計算屬性的setter和getter來完成。

v-model綁定多個屬性

我們現(xiàn)在通過v-model是直接綁定了一個屬性揭保，如果我們希望綁定多個屬性呢肥橙？也就是我們希望在一個組件上使用多個v-model是否可以實現(xiàn)呢？

我們知道秸侣，默認情況下的v-model其實是綁定了 modelValue 屬性和 @update:modelValue 的事件存筏，如果我們希望綁定更多，可以給v-model傳入一個參數(shù)味榛，那么這個參數(shù)的名稱就是我們綁定屬性的名稱椭坚。這里我是綁定了兩個屬性的：

<!-- 綁定兩個v-model -->
<hy-input v-model="message" v-model:title="title"></hy-input>

v-model:title相當(dāng)于做了兩件事：
① 綁定了title屬性；
② 監(jiān)聽了@update:title的事件搏色；

HyInput.vue文件代碼如下：

<template>
  <div>
    <input v-model="value">
    <input v-model="why">
  </div>
</template>

<script>
  export default {
    props: {
      modelValue: String,
      title: String 
    },
    emits: ["update:modelValue", "update:title"],
    computed: {
      value: {
        set(value) {
          this.$emit("update:modelValue", value);
        },
        get() {
          return this.modelValue;
        }
      },
      why: {
        set(why) {
          this.$emit("update:title", why);
        },
        get() {
          return this.title;
        }
      }
    }
  }
</script>
<style scoped>
</style>

以后我們封裝高級組件的時候就會經(jīng)常在組件上使用v-model了善茎。