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

切換組件案例

比如我們現在想要實現了一個功能：點擊一個tab-bar，切換不同的組件顯示。

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

v-if顯示不同的組件

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

動態組件的實現

動態組件是使用 component 組件，通過一個特殊的attribute is 來實現：

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

動態組件的傳值和監聽事件

動態組件的傳值和監聽事件和父子組件之間的通信是一模一樣的，只需要將動態組件當成一個子組件即可，只需要將屬性和監聽事件放到component上來使用即可。

比如：父組件通過name、age屬性給子組件傳值，子組件通過$emit觸發事件，父組件通過監聽pageClick事件得到子組件傳遞的值。

keep-alive

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

比如我們將counter點到10，那么在切換到home再切換回來about時，狀態是否可以保持呢？
答案是否定的，這是因為默認情況下，我們在切換組件后，about組件會被銷毀掉，再次回來時會重新創建組件。

但是，在開發中某些情況我們希望繼續保持組件的狀態，而不是銷毀掉，這個時候我們就可以使用一個內置組件：keep-alive。

keep-alive有一些屬性：

include：string | RegExp | Array。只有名稱匹配的組件會被緩
存；
exclude：string | RegExp | Array。任何名稱匹配的組件都不
會被緩存；
max：number | string。最多可以緩存多少組件實例，一旦達
到這個數字，那么緩存組件中最近沒有被訪問的實例會被銷毀；

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

緩存組件的生命周期

對于緩存的組件來說，再次進入時，我們是不會執行created或者mounted等生命周期函數的。但是有時候我們確實希望監聽到何時重新進入到了組件，何時離開了組件，這個時候我們可以使用activated 和 deactivated 這兩個生命周期鉤子函數來監聽。

Webpack的import函數分包

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

如下：app.后面是文件的hash值，hash值和文件變化有關系，.map文件是映射文件，chunk-vendors是第三方的包。

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

通過import函數導入的模塊，后續webpack對其進行打包的時候就會進行分包的操作，也就是會打包成chunk.js，如下：

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

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

Vue中實現異步組件

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

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

類型一工廠函數的寫法：上面我們知道了import函數會返回一個Promise對象，所以我們直接寫一個工廠箭頭函數，然后把返回的Promise對象當做defineAsyncComponent函數的參數即可。

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

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

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

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

一般開發中我們很少如上這么用，因為我們以后會學到路由，以后基本上都是路由懶加載組件。

異步組件和Suspense結合使用

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

Suspense是一個內置的全局組件，該組件有兩個插槽：

• default：如果default可以顯示，那么顯示default的內容；
• fallback：如果default無法顯示或者還沒顯示，那么會顯示fallback插槽的內容；

實際項目中異步組件是服務端獲取的，有可能比較慢，所以我們可以使用Suspense組件，優先顯示默認內容，如果默認內容加載失敗或者還沒顯示，則顯示fallback插槽的內容，如下：

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

$refs的使用

在Vue開發中我們是不推薦進行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);
        //獲取組件數據
        console.log(this.$refs.navBar.message);
        //調用組件方法
        this.$refs.navBar.sayHello();
        //獲取組件的根元素通過$el
        console.log(this.$refs.navBar.$el);
      }
    }
  }
</script>
<style scoped>
</style>

$parent和$root

在子組件中，我們可以通過$parent來訪問父元素，通過$root來訪問根組件。項目中使用的比較少，因為會導致組件耦合性太強。

注意：在Vue3中已經移除了$children的屬性，所以不可以使用了。

認識生命周期

什么是生命周期呢？
每個組件都可能會經歷從創建、掛載、更新、卸載等一系列的過程，在這個過程中的某一個階段，我們可能會想要添加一些屬于自己的代碼邏輯（比如組件創建完后就請求一些服務器數據）。但是我們如何可以知道目前組件正在哪一個過程呢？Vue給我們提供了組件的生命周期函數。

生命周期函數是一些鉤子函數，在某個時間會被Vue源碼內部進行回調，通過對生命周期函數的回調，我們可以知道目前組件正在經歷什么階段，那么我們就可以在該生命周期中編寫屬于自己的邏輯代碼了。

生命周期的流程

<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的數據綁定和@input的事件監聽。

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

如果我們現在封裝了一個組件，其他地方在使用這個組件時，是否也可以使用v-model來同時完成這兩個功能呢？也是可以的，vue也支持在組件上使用v-model。

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

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

我們會發現和input元素不同的只是屬性的名稱和事件觸發的名稱而已。

組件v-model的實現

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

HyInput.vue的組件代碼如下：

組件使用的時候：

通過computed實現

我們依然希望在組件內部按照雙向綁定的做法去完成，應該如何操作呢？
我們可以使用計算屬性的setter和getter來完成。

v-model綁定多個屬性

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

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

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

v-model:title相當于做了兩件事：
① 綁定了title屬性；
② 監聽了@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>

以后我們封裝高級組件的時候就會經常在組件上使用v-model了。