尚硅谷 Vue3 視頻筆記

Sun, 17 Jul 2022 00:00:00 +0000

創建 Vue 3.0 工程

使用 vue cli 創建

官方文檔：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


## 查看 @vue/cli 版本，確保 @vue/cli 版本在 4.5.0 以上
vue --version

## 安裝或升級你的 @vue/cli
npm install -g @vue/cli

## 創建
vue create vue_test

## 啟動
cd vue_test
npm run serve

使用 vite 創建(Vue作者的團隊開發)

官方文檔：https://v3.cn.vuejs.org/guide/installation.html#vite
vite官網：https://vitejs.cn/
優勢：
- 開發環境中，無需打包操作，可快速的冷啟動。
- 輕量快速的熱重載(HMR)。
- 真正的按需編譯，不再等待整個應用編譯完成。
傳統 grunt、gulp、webpack 與 vite 構建對比圖：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


## 創建工程
npm init vite-app <project-name>

## 進入工程目錄
cd <project-name>

## 安裝依賴
npm install

## 啟動
npm run dev

安裝 Vue 開發者工具

Vue.js devtools

拉開序幕的 Setup

Vue3.0 中一個新的配置項，值為一個函數。
是所有 Composition API (組合式API) 的表演舞台。
組件中所用到的數據、方法等等，均要配置在 setup 中。
setup 函數的：
- 若返回一個對象，則對象中的屬性、方法，在模板中均可直接使用。(重點關注!)
- 若返回一個渲染函數，則可以自定義渲染內容。(了解即可)

返回對象

1
2
3
4
5
6
7
8


export default {
 setup() {
 const name = "測試"
 return {
 name
 }
 }
}

返回渲染函數(需引入 `h` )

1
2
3
4
5
6


import { h } from "vue"
export default {
 setup() {
 return () => { return h('h1', '尚硅谷')}
 }
}

注意：

不要與Vue2.x配置混用。
- Vue2.x配置(data、methods、computed…)中可以訪問到setup中的屬性、方法，但在setup中不能訪問到Vue2.x配置(data、methods、computed…)。
- 如果有重名，setup優先。
setup 不能是一個 async 函數，因為返回值不再是 return 的對象，而是一個 promise，模板看不到 return 對象中的屬性；後期可以返回一個 Promise 實例，但需要 Suspense 與 異步組件(動態組件) 的配合：點我前往 Suspense

ref 函數

作用：定義一個響應式的數據。
語法：

1

const xxx = ref(initValue)

將數據加工成一個 RefImpl (Reference: 引用；Implete: 實現) = (引用實現的實例對象)。
js 中操作數據：xxx.value。
模板中讀取數據：<div>{{xxx}}</div>

備註：

接收的數據可以是基本類型，也可以是對象類型。
基本類型的數據：響應式依然是靠 Object.defineProperty() 的 get 與 set 完成的。
對象類型的數據：內部求助了 Vue3.0 中的一個新函數—- reactive

reactive 函數

作用：定義一個對象類型的響應式數據(基本類型別用他，用ref函數)。
語法：

1
2
3
4


const xxx = reactive({
 name: "測試",
 age: 18
})

接收一個對象或數組，返回一個代理對象(Proxy對象)。
reactive 定義的響應式數據是深層次的。
內部基於 ES6 的 Proxy 實現，通過代理對象操作源對象內部數據都是響應式的，並通過 Reflect 操作源對象內部的數據。
js、模板中操作數據均不需要 .value

Vue 2.0 中的響應式原理

實現原理：

對象類型：通過 Object.defineProperty() 對屬性的讀取、修改進行攔截(數據劫持)。
數組類型：通過重寫更新數組的一系列方式來實現攔截。(對數組的變更方法進行了包裹)。

1
2
3
4
5
6
7
8


Object.defineProperty(data, "count", {
 get() {

 },
 set() {

 }
})

原理模擬：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


let person = {
 name: "張三",
 age: 18
}

// 模擬 Vue2 中實現響應式
let p = {}
Object.defineProperty(p, "name", {
 configurable: true, // 允許刪除，但捕獲不到
 get() {
 // 有人讀取 name 時調用
 return person.name
 },
 set(value) {
 console.log("有人修改了 name 屬性，我發現了ㄛ，我要去更新介面！")
 person.name = value
 }
})
Object.defineProperty(p, "age", {
 configurable: true, // 允許刪除，但捕獲不到
 get() {
 // 有人讀取 age 時調用
 return person.age
 },
 set(value) {
 console.log("有人修改了 age 屬性，我發現了ㄛ，我要去更新介面！")
 person.age = value
 }
})

存在問題：
- 新增屬性、刪除屬性，介面不會更新，需使用 $set、$delete。
- 直接通過下標修改數組，介面不會更新，需使用 $set、$delete。

問題情況演示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


export default {
 data() {
 return {
 person: {
 name: "張三",
 age: 18,
 hobby: ["學習", "吃飯"]
 }
 }
 },
 methods: {
 addSex() {
 this.person.sex = "女" // 此時畫面不會更新
 this.$set(this.person, "sex", "女") // 需使用 $set 畫面才會更新
 // 或是使用 Vue.set()
 // Vue.set(this.person, "sex", "女")
 },
 deleteName() {
 delete this.person.name // 此時畫面不會更新
 this.$delete(this.person, "name") // 需使用 $delete 畫面才會更新
 // 或是使用 Vue.delete()
 // Vue.delete(this.person, "name")
 },
 updateHobby() {
 this.person.hobby[0] = "逛街" // 此時畫面不會更新
 this.$set(this.person.hobby, 0, "逛街") // 需使用 $set 畫面才會更新
 // 或是使用 splice()
 // this.person.hobby.splice(0, 1, "逛街")
 }
 }
}

Vue 3.0 中的響應式原理

實現原理：

通過 Proxy(代理)：攔截對象中任意屬性的變化，包含屬性值的讀寫、屬性的新增、屬性的刪除等。
通過 Reflect(反射)：對被代理對象的屬性進行操作。

原理模擬：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


let person = {
 name: "張三",
 age: 18
}

// 模擬 Vue3 中實現響應式
const p = new Proxy(person, {
 // 有人讀取p的某個屬性時調用
 get(target, propName) {
 console.log(`有人讀取了p身上的${propName}屬性`)
 return Reflect.get(target, propName)
 },
 // 有人新增或修改p的某個屬性時調用
 set(target, propName, value) {
 console.log(`有人修改了p身上的${propName}屬性，我要去更新介面了！`)
 Reflect.set(target, propName, value)
 },
 // 有人刪除p的某個屬性時調用
 deleteProperty(target, propName) {
 console.log(`有人刪除了p身上的${propName}屬性，我要去更新介面了！`)
 return Reflect.deleteProperty(target, propName)
 }
})

setup 的兩個注意點

setup 執行的時機：在 beforeCreate 之前執行一次，this 是 undefined。
setup 的參數
- props：值為對象，包含：組件外部傳遞過來，且組件內部聲明接收了的屬性。
- context：上下文對象：
  - attrs：值為對象，包含：組件外部傳遞過來，但沒有在 props 配置中聲明的屬性，相當於 Vue 2.0 的 this.$attrs。
  - slots：接收的插槽內容，相當於 Vue 2.0 的 this.$slots。
  - emit：分發自定義事件的函數，相當於 Vue 2.0 的 this.$emit。

watch 函數

與 Vue 2.0 中的 watch 配置功能一致。
兩個小"坑"：
- 監視 ref 定義的響應式數據時，不需加 .value。
- 監視 reactive 定義的響應式數據時，oldValue 無法正確捕獲、強制開啟了深度監視(deep配置失效)。
- 監視 reactive 定義的響應式數據中的某個屬性時，deep 配置有效。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


import { ref, reactive, watch } from "vue"
export default {
 setup() {
 const sum = ref(10)
 const msg = ref("測試")
 const person = reactive({
 name: "張三",
 age: 18,
 job: {
 job1: {
 salary: 20
 }
 }
 })

 // 情況一：監視 ref 定義的響應式數據
 watch(sum, (newValue, oldValue) => {
 console.log("sum變化了", newValue, oldValue)
 }, { immediate: true })

 // 情況二：同時監視多個 ref 定義的響應式數據
 watch([sum, msg], (newValue, oldValue) => {
 console.log("sum或msg變化了", newValue, oldValue)
 }, { immediate: true })

 /*
 * 情況三：監視 reactive 定義的響應式數據的全部屬性
 * 1. 注意: 此數無法正確的獲取 oldValue
 * 2. 注意: 強制開啟了深度監視(deep配置無效)
 */
 watch(person, (newValue, oldValue) => {
 console.log("person變化了", newValue, oldValue)
 }, { immediate: true, deep: false }) // 此處的 deep 配置無效

 // 情況四：監視 reactive 定義的響應式數據的某個屬性
 watch(() => person.name, (newValue, oldValue) => {
 console.log("person的name變化了", newValue, oldValue)
 }, { immediate: true })

 // 情況五：監視 reactive 定義的響應式數據的某些屬性
 watch([() => person.name, () => person.age], (newValue, oldValue) => {
 console.log("person的name或age變化了", newValue, oldValue)
 }, { immediate: true })

 // 特殊情況：監視 reactive 定義的響應式數據的某些對象屬性
 watch(() => person.job, (newValue, oldValue) => {
 console.log("person的job變化了", newValue, oldValue)
 }, { immediate: true, deep: true }) // 此處由於監視的是 reactive 所定義的對象中的某個屬性，所以 deep 配置有效

 return {
 sum,
 msg
 }
 }
}

watch 時 value 的問題

若監視的數據為 ref 求助 reactive 生成的響應式數據，則可使用以下兩種方式進行監視：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


import { ref, watch } from "vue"
export default {
 setup() {
 const sum = ref(0)
 const person = ref({
 name: "張三",
 name: 18,
 job: {
 job1: {
 salary: 20
 }
 }
 })

 watch(sum, (newValue, oldValue) => {
 // 監視的是 sum 這個 RefImpl 數據，因此不需要 .value
 console.log("sum的值變化了", newValue, oldValue)
 })

 // 方法一:
 watch(person.value, (newValue, oldValue) => {
 // 監視 person.value 的 Proxy 對象
 console.log("person的值變化了", newValue, oldValue)
 })

 // 方法二:
 watch(person, (newValue, oldValue) => {
 // 深度監視 person 的 Proxy 對象的屬性
 console.log("person的值變化了", newValue, oldValue)
 }, { deep: true })

 return {
 person
 }
 }
}

watchEffect

智能版 watch，不用指名監視哪個屬性，監視的回調中用到哪個屬性，就監視哪個屬性(而且是深層次的)。
watchEffect 有點像 computed：
- 但 computed 注重計算出來的值(回調函數的返回值)，所以必須要寫返回值。
- 而 watchEffect 更注重的是過程(回調函數的函數體)，所以不用寫返回值。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


import { ref, reactive, watchEffect } from "vue"
export default {
 setup() {
 const sum = ref(0)
 const person = reactive({
 name: "張三",
 age: 18,
 job: {
 job1: {
 salary: 20
 }
 }
 })
 watchEffect(() => {
 const x1 = sum.value
 const x2 = person.job.job1.salary

 console.log("watchEffect 配置的回調執行了")
 })
 }
}

自定義 hook 函數

hook 本質是一個函數，把 setup 函數中使用的 Composition API 進行了封裝。
類似於 vue 2.0 中的 mixin。
自定義 hook 的優勢：重複使用代碼，讓 setup 中的邏輯更清楚易懂。
命名通常建議以 “use” 開頭，例如：

一個獲取鼠標點擊位置的 hook

src/hooks/usePoint.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


import { reactive, onMounted, onBeforeUnmount} from "vue"
export default function() {
 // 獲取鼠標點擊位置 相關的數據
 let point = reactive({
 x: 0,
 y: 0
 })

 // 獲取鼠標點擊位置 相關的方法
 function savePoint(event) {
 console.log(event.pageX, event.pageY)
 point.x = event.pageX
 point.y = event.pageY
 }

 // 獲取鼠標點擊位置 相關的生命週期鉤子
 onMounted(() => {
 window.addEventListener("click", savePoint)
 })

 onBeforeUnmount(() => {
 window.removeEventListener("click", savePoint)
 })

 return point
}

Demo.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


import usePoint from "@/hooks/usePoint"

export default {
 name: "Demo",
 setup() {
 // 使用自定義的 hook
 const point = usePoint()

 return {
 point
 }
 }
}

toRef

作用：創建一個 ref 對象，其 value 值指向(引用)另一個對象中的某個屬性(返回值為一個 ObjectRefImpl 對象，為響應式)。
語法：

1

const name = toRef(person, "name")

應用：要將響應式對象中的某個屬性單獨提供給外部使用時。
擴展：toRefs 與 toRef 功能一致，但可以批量創建多個 ref 對象，語法：

1

toRefs(person)

使用範例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


import { reactive, toRef, toRefs} from "vue"
export default {
 setup() {
 let person = reactive({
 name: "張三",
 age: 18,
 job: {
 job1: {
 salary: 20
 }
 }
 })

 const name1 = person.name // name1 僅為賦值，無響應式
 const name2 = toRef(person, "name") // name2 的值會指向(引用) person 的 name

 return {
 // errors：
 // name1: person.name, // 僅為賦值，無響應式
 // name2: ref(person.name) // 初始值正常，但修改時不會改到 person 的 name，因為此寫法僅是將 "ref(pserson.name)" 賦值給 name2，而非將 name2 指向 person 的 name

 // success：
 // 模板中使用 {{ person.name }}...等：
 // person,

 // 一個一個給出，模板中使用 {{ name }}...等：
 // name: toRef(person, "name"),
 // age: toRef(person, "age"),
 // salary: toRef(person.job.job1, "salary")

 // 一次全給出，模板中可直接使用 {{ name }}、{{ age }}、{{ job.job1.salary }}
 ...toRefs(person)
 }
 }
}

其他的 Composition API

1. shallowReactive 與 shallowRef

shallow：淺層的
shallowReactive：只處理對象最外層屬性的響應式(淺響應式)。
shallowRef：只處理基本數據類型的響應式，不進行對象的響應式處理。
什麼時候使用？
- 如果有一個對象數據，結構比較深，但變化時只是外層屬性變化 => shallowReactive。
- 如果有一個對象數據，後續功能不會修改該對象中的屬性，而是生成新的對象來替換 => shallowRef。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


import { shallowRef, shallowReactive, toRefs} from "vue"
export default {
 setup() {
 let person = shallowReactive({ // 只考慮第一層數據的響應式
 name: "張三", // 響應式
 age: 18, // 響應式
 job: { // 非響應式
 job1: {
 salary: 20
 }
 }
 })

 let x = shallowRef({ // 基本類型時同 ref，但對象類型不是響應式(value 會變成一般的 Object 而不是 Proxy )
 y: 0
 })

 return {
 x,
 ...toRefs(person)
 }
 }
}

2. readonly 與 shallowReadonly

readonly：讓一個響應式數據變為唯讀的(深層唯讀)。
shallowReadonly：讓一個響應式數據變為唯讀的(淺層唯讀)。
應用場景：不希望數據被修改時。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


import { ref, reactive, toRefs, readonly, shallowReadonly} from "vue"
export default {
 setup() {
 let sum = ref(0)
 let person = reactive({
 name: "張三",
 age: 18,
 job: {
 job1: {
 salary: 20
 }
 }
 })

 // 將 sum 變為唯讀，保護數據不被修改
 sum = readonly(sum)

 // 將 person 的所有屬性變為唯讀，保護所有屬性數據不被修改
 person = readonly(person)

 // 將 person 的"第一層屬性數據"變為唯讀(name、age無法修改，但 job 可以)
 person = shallowReadonly(person)

 return {
 sum,
 ...toRefs(person)
 }
 }
}

toRaw 與 markRaw

raw：原始。
toRaw：
- 作用：將一個由 reactive 生成的響應式對象轉為普通對象。
- 應用場景：用於讀取響應式對象對應的普通對象，對這個普通對象的所有操作，不會引起頁面更新。
markRaw：
- 作用：標記一個對象，使其永遠不會再成為響應式對象。
- 應用場景：
  - 有些值不應被設置為響應式的，例如複雜的第三方類庫等。
  - 當渲染具有不可變數據源的大列表時，跳過響應式轉換可以提高性能。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


import { ref, reactive, toRaw, markRaw} from "vue"
export default {
 setup() {
 let sum = ref(0)
 let person = reactive({
 name: "張三",
 age: 18,
 job: {
 job1: {
 salary: 20
 }
 }
 })

 function showRawPerson() {
 const p = toRaw(person)
 console.log(p) // 返回的不再是 Proxy，而是 Object
 }

 function addCar() {
 let car = { name: "奔馳", price: 40}
 person.car = markRaw(car) // 標記 person.car 不是響應式的數據(數據依舊可修改，但畫面不會變)
 }

 return {
 sum,
 ...toRefs(person),
 showRawPerson,
 addCar
 }
 }
}

customRef

作用：創建一個自定義的 ref，並對其依賴項跟蹤和更新觸發進行顯示控制。
實現防抖效果：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43


<template>
 <input type="text" v-model="keyWord" />
 <h3>
 {{ keyWord }}
 </h3>
</template>
<script>
import { ref, customRef } from "vue"
export default {
 setup() {
 // 使用 vue 提供的 ref
 // let keyWord = ref("hello")

 // 自定義的一個 ref
 function myRef(value, delay) {
 let timer
 return customRef((track, trigger) => {
 return {
 get() {
 console.log(`有人從 myRef 這個容器中讀取數據了，我把${value}給他了`)
 track() // 通知 Vue 追蹤數據的變化(提前與 get 商量一下，讓它認為這個 value 是有用的)
 return value
 },
 set(newValue) {
 console.log(`有人把 myRef 這個容器中的數據改為了${newValue}`)
 clearTimeout(timer)
 timer = setTimeout(() => {
 value = newValue
 trigger() // 通知 Vue 去重新解析模板，以便觸發 get
 }, delay)
 }
 }
 })
 }
 // 使用自定義的防抖 ref
 let keyWord = myRef("hello", 500)

 return {
 keyWord
 }
 }
}
</script>

provide 與 inject

作用：實現祖孫組件間通信。
套路：父組件有一個 provide 選項來提供數據，後代組件有一個 inject 選項來開始使用這些數據。
具體寫法：

1. 祖組件中：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import { reactive, toRefs, provide } from "vue"
export default {
 name: "App",
 setup() {
 let car = reactive({
 name: "奔馳",
 price: "40W"
 })
 provide("car", car) // 給自己的後代組件傳遞數據
 return { ...toRefs(car) }
 }
}

2. 後代組件中：

1
2
3
4
5
6
7
8
9


import { inject } from "vue"
export default {
 name: "Son",
 setup() {
 let car = inject("car")
 console.log(car)
 return { car }
 }
}

響應式數據的判斷

isRef：檢查一個值是否為一個 ref 對象。
isReactive：檢查一個對象是否是由 reactive 創建的響應式代理。
isReadonly：檢查一個對象是否是由 readonly 創建的唯讀代理。
isProxy：檢查一個對象是否是由 reactive 或是 readonly 方法創建的代理。

Teleport

teleport：傳送、瞬間移動。
作用：能夠將我們的 組件 html 結構 移動到指定的位置。
具體寫法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<teleport to="body">
 <!-- to 也能寫 css select，例如 to="#app" -->
 <div v-if="isShow" class="mask">
 <div class="dialog">
 <h3>
 我是一個彈窗
 </h3>
 <button @click="isShow = false">
 關閉彈窗
 </button>
 </div>
 </div>
</teleport>

Suspense

suspense：懸疑、懸而未決的。
作用：等待異步組件時，渲染一些額外內容，讓使用者有更好的用戶體驗。
使用步驟：

異步引用組件

1
2


import { defineAsyncComponent } from "vue" // 宣告異步組件時使用
const Child = defineAsyncComponent(() =>. import ("./components/Child.vue"))

使用 `Suspense` 包裹組件，並配置好 `default` 與 `fallback`

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<template>
 <div id="app">
 <h3>我是App組件</h3>

 <Suspense>
 <template v-slot:default>
 <Child />
 </template>
 <template v-slot:fallback>
 <h3>加載中......</h3>
 </template>
 </Suspense>
 </div>
</template>

全局 API 的轉移

Vue 2.0 有許多全局 API 和配置。
- 例如：註冊全局組件、註冊全局指令等。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// 註冊全局組件
Vue.component("MyButton", {
 data() {
 return {
 count: 0
 }
 },
 template: "<button @click='count++'>Clicked {{ count }}</button>"
})

// 註冊全局指令
Vue.directive("focus", {
 inserted: el => el.focus()
})

Vue 3.0 中對這些 API 做出了調整：
- 將全局的 API，即： Vue.xxx 調整到應用實例(app)上

2.0 全局 API(`Vue`)	3.0 實例 API(`app`)
Vue.config.xxxx	app.config.xxxx
Vue.config.productionTip	移除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

前端 on Wayne's blog | 偉恩的部落格 | 技術博客

尚硅谷 Vue3 視頻筆記

創建 Vue 3.0 工程

使用 vue cli 創建

使用 vite 創建(Vue作者的團隊開發)

安裝 Vue 開發者工具

拉開序幕的 Setup

返回對象

返回渲染函數(需引入 h )

ref 函數

備註：

reactive 函數

Vue 2.0 中的響應式原理

實現原理：

原理模擬：

問題情況演示：

Vue 3.0 中的響應式原理

實現原理：

原理模擬：

setup 的兩個注意點

watch 函數

watch 時 value 的問題

watchEffect

自定義 hook 函數

一個獲取鼠標點擊位置的 hook

src/hooks/usePoint.js

Demo.vue

toRef

使用範例：

其他的 Composition API

1. shallowReactive 與 shallowRef

2. readonly 與 shallowReadonly

toRaw 與 markRaw

customRef

provide 與 inject

1. 祖組件中：

2. 後代組件中：

響應式數據的判斷

Teleport

Suspense

異步引用組件

使用 Suspense 包裹組件，並配置好 default 與 fallback

全局 API 的轉移

返回渲染函數(需引入 `h` )

使用 `Suspense` 包裹組件，並配置好 `default` 與 `fallback`