在《Vue3.x 從零開始（二）》中已經介紹了 Mixin 這種抽取公共邏輯的方式
但 Mixin 提供的數據或函數，無法在組件中直觀的體現出來
這導致組件的維護人員需要非常熟悉被引入的 Mixin 對象，不然出現重名的情況就容易出現意料之外的 bug
而 Composition API 是以函數的形式封裝公共邏輯，它通過顯式的返回一個對象，讓開發人員能在組件中直接瞭解到被引入的字段
一、簡單示例
假如某個組件需要在加載完成後，根據父組件傳入的參數來發送請求，並渲染請求結果：
這些邏輯可以直接提取爲 mixin 對象，以達到複用的目的
也可以通過 Composition API 將這部分邏輯封裝成一個函數
在這個例子中，我們將相應的邏輯代碼都放到了 setup 函數中，它是 Composition API 的入口
setup 函數在組件創建之前就會觸發，最終返回一個我們定義的對象，這個對象的字段可以在組件的其他地方直接使用
比如上例中返回了變量 list 和函數 fetchList，我們可以直接在組件的 methods 或者其他地方，通過 this.list 、this.fetchList 使用他們
在實際項目中，可以將上面的邏輯單獨封裝成一個函數並在 setup 中調用，最終返回函數的返回值
對比一下上面的兩段代碼，你應該會對 setup 有一個簡單的認識，接下來我會詳細介紹 setup 和 Composition API
二、生命週期和 setup
每個 Vue 組件都有一個屬於自己的生命歷程：
created（創建）-> mounted（加載）-> updated（更新）-> unmounted（卸載）
這些過程會對應一個鉤子函數，這些鉤子函數會在相應的階段觸發
上面只提到了四個生命週期，完整的生命週期可以參考《生命週期圖示》
// vue 2 中的 destroyed 和 beforeDestroy 鉤子在 vue 3 中被重命名爲 unmounted 和 beforeUnmount
而 setup 函數是在解析其它組件選項之前，也就是 beforeCreate 之前執行
所以在 setup 內部，this 不是當前組件實例的引用，也就是說 setup 中無法直接調用組件的其他數據
如何在不能直接使用組件數據的前提下，完成組件的業務邏輯呢？
於是 Composition API 登場了，它讓我們能夠在 setup 中使用生命週期鉤子函數、響應式數據等組件特性
別急，這些內容待會兒就會介紹，目前還是先把 setup 弄清楚
1. setup 不是生命週期鉤子函數！
它只是基於 beforeCreate 運行，但函數內部無法通過 this 獲取組件實例
而且 setup 有着生命週期鉤子不具備的參數：props 和 context
setup(props, context) {
// 組件 props
console.log(props);
const { attrs, slots, emit } = context;
// Attribute (非響應式對象)
console.log(attrs);
// 組件插槽 (非響應式對象)
console.log(slots);
// 觸發事件 (方法)
console.log(emit);
}
這裏的 props 就是組件內部定義的 props，是由父組件傳入的參數
假如父組件傳入了一個屬性名爲 title 的 props，在 setup 中可以通過 props.title 直接取到
而且這個 props 是響應式的，當傳入新的 prop 時，props 會被更新
但正是因爲 props 是響應式的，所以不能直接對 props 使用 ES6 解構，因爲它會消除 prop 的響應性
Vue 3 提供了一個 toRefs 全局方法來解決這個問題：
import { toRefs } from 'vue';
setup (props) {
// 通過 toRefs 包裝後的 props 可以在 ES6 解構之後依然具有響應性
const { title } = toRefs(props);
console.log(title);
}
2. 在 setup 中註冊生命週期鉤子
如果是在 setup 內部註冊生命週期鉤子，則需要從 Vue 引入帶有 on 前綴的生命週期工具函數
import { toRefs, onMounted } from 'vue';
setup (props) {
// 使用 `toRefs` 創建對prop的 `title` property 的響應式引用
const { title } = toRefs(props);
// 註冊生命週期鉤子
onMounted(() => {
console.log('onMounted', title);
});
}
上面的 onMounted 會接收一個函數作爲參數，在組件中對應的生命週期鉤子 (mounted) 觸發時，會執行這個被傳入的函數
除了 onMounted 以外，其他 created 之後的生命週期也有對應的註冊函數，如 onUpdated、onBeforeUnmount 等
但 setup 中並沒有 beforeCreate 和 created 這兩個生命週期的註冊函數
因爲 setup 本身是基於 beforeCreate 運行，會用到 beforeCreate 和 created 的場景都可以通過 setup 替代
也就是說，在 beforeCreate 和 created 中編寫的任何代碼都應該直接在 setup 函數中編寫
3. setup 的返回值
如果 setup 顯式的返回了一個對象，這個對象的所有內容都會暴露給組件的其餘部分
setup() {
return {
name: 'wise wrong',
foo: (text: string) => {
console.log(`Hello ${text}`);
},
};
},
mounted() {
// 直接使用 setup 的返回值
this.foo(this.name);
},
上面的 setup 返回了一個 foo 函數，還有一個 name 字段，目前這個 name 還不是一個響應式變量
爲此我們需要使用 ref 全局方法
import { ref } from 'vue';
setup (props) {
return {
name: ref('wise wrong');
}
}
通過 ref 包裝的變量會具有響應性，在組件中可以像正常的組件屬性一樣使用
但在 setup 內部，ref 包裝後的變量需要通過 value 來修改變量的值
import { ref } from 'vue';
setup() {
const name = ref('wise wrong');
onMounted(() => {
// 在 setup 內部通過 value 修改變量值
name.value = "Let's study Vue 3";
});
return {
name,
};
},
methods: {
test() {
// 在組件中可以直接修改 ref 變量
this.name = 'good job';
},
},
除了返回一個對象以外，setup 還可以返回一個渲染函數
import { h, ref, reactive } from 'vue'
export default {
setup() {
const readersNumber = ref(0)
const book = reactive({ title: 'Vue 3 Guide' })
// 返回一個渲染函數以覆蓋 template
return () => h('div', [readersNumber.value, book.title])
}
}
如果直接返回了渲染函數，組件中定義的 template 將會失效
三、在 Setup 中使用 Computed、Watch
setup 的本意是用來替代 mixin，因此除了 data、methods、生命週期鉤子之外，還有許多組件選項需要解決
這裏先介紹 computed 和 watch
1. Computed
在組件中 computed 用來管理包含響應式數據的複雜邏輯
computed: {
booksMessage() {
return this.books.length > 0 ? 'Yes' : 'No'
}
}
計算屬性可以在組件中直接使用，並會隨着響應式數據的更新而更新
<template>
<p>{{ booksMessage }}</p>
</template>
而在 setup 中，需要通過全局函數 computed 來包裝
import { ref, computed } from 'vue'
setup() {
const books = ref([]);
const booksMessage = computed(() => books.value.length > 0 ? 'Yes' : 'No');
return {
books,
booksMessage,
}
}
2. Watch
watch 用來監聽數據的變化
可以通過 watch 定義對應的處理函數，當數據發生變化時候會調用該函數
data: () => ({
question: '',
answer: 'good luck :)'
}),
watch: {
question(newQuestion, oldQuestion) {
// 當 question 變化的時候會執行該函數
if (newQuestion.indexOf('?') > -1) {
console.log('answer: ', this.answer);
}
}
},
在 setup 中，也需要使用全局函數 watch 來包裝
import { ref, watch } from 'vue'
setup() {
const question = ref('');
const answer = ref('good luck :)');
watch(question, (newValue, oldValue) => {
if (newValue.indexOf('?') > -1) {
console.log('answer: ', this.answer.value);
}
});
return {
question,
answer,
}
}
四、抽取公共邏輯
在瞭解了基本的 Composition API 之後，可以嘗試將公共邏輯抽取出來單獨維護
假設有以下兩個邏輯點需要被抽取：
1. 在組件加載完成後，通過父組件傳入的參數 query 請求數據列表 list，當 query 變化時需要重新請求並更新 list；
2. 根據關鍵字 keyword 從數據列表 list 中篩選數據，並使用 computed 記錄結果。
這兩段邏輯可以直接在 setup 中實現，但這樣會使得 setup 看起來非常累贅
我們可以把這段邏輯拆成兩個函數並單獨維護
首先在項目目錄 src 下創建一個新的文件夾 composables
然後創建 useList.js 文件，完成第一個邏輯：
// src/composables/useList.js
import { ref, onMounted, watch } from 'vue';
// 發起接口請求
function fetchList() {
// ...
}
export default function useList(query) {
// 創建數據列表 list (data)
const list = ref([]);
// 創建查詢並更新 list 的方法 (methods)
const getList = async () => {
list.value = await fetchList(query);
};
// 生命週期 mounted
onMounted(getList);
// 監聽 query 的變化並更新 list
watch(query, getList);
return {
list,
getList,
};
}
然後創建 useFilter.js 文件，完成第二個邏輯：
// src/composables/useFilter.js
import { ref, computed } from 'vue';
export default function useList(list) {
// 創建搜索關鍵字 keyword (data)
const keyword = ref('');
// 創建篩選結果 filterRes (computed)
const filterRes = computed(() => {
return list.filter((value) => {
return value.includes(keyword.value);
});
});
return {
keyword,
filterRes,
};
}
然後在組件中引入，並在 setup 返回組件需要的字段
import { defineComponent, toRefs } from 'vue';
import useList from '@/composables/useList';
import useFiter from '@/composables/useFilter';
export default defineComponent({
props: ['query'],
setup(props) {
const { query } = toRefs(props);
const { list, getList } = useList(query);
const { keyword, filterRes } = useFiter(list);
return {
keyword, // 篩選關鍵字
getList, // 查詢並更新數據列表
list: filterRes, // 不需要返回未經篩選的列表
};
},
});
這樣的代碼是不是更加清爽了呢？