vue3 composition api入門教程
我們使用vue自定義組件的時(shí)候，為了可以復(fù)用重復(fù)的功能代碼時(shí)，提高代碼的靈活性和可維護(hù)性，我們會(huì)把組件的邏輯抽離出來(lái)。雖然這樣已經(jīng)可以實(shí)現(xiàn)組件的復(fù)用，但是隨著應(yīng)用的復(fù)雜度組件增大，會(huì)對(duì)某一些方法進(jìn)行功能迭代，這樣對(duì)于那些新人，需要閱讀舊的代碼邏輯，對(duì)于開(kāi)發(fā)不太友好。
vue composition api解決了什么問(wèn)題？
隨著應(yīng)用功能的持續(xù)迭代，復(fù)雜組件的代碼變得越來(lái)越難以推理。這種情況通常發(fā)生在新來(lái)的開(kāi)發(fā)人員閱讀自己未編寫的代碼時(shí)。根本原因是Vue的現(xiàn)有API通過(guò)選項(xiàng)強(qiáng)制執(zhí)行代碼組織，但在某些情況下，通過(guò)邏輯考慮來(lái)組織代碼更有意義。
提供組件之間邏輯提取和重用的新機(jī)制，提供了更好的靈活性和可維護(hù)性。
api設(shè)計(jì)composition api?統(tǒng)一路徑?src/composables, 文件名統(tǒng)一用?use?開(kāi)頭，例如?src/composables/useUserSearch.jssetup?函數(shù)是處于生命周期函數(shù)?beforeCreate?和?created?兩個(gè)鉤子函數(shù)之前的函數(shù)，是最先執(zhí)行的函數(shù)setup?函數(shù)不能使用this，在 setup 函數(shù)中使用?this?是?undefined，因?yàn)榇藭r(shí)組件還沒(méi)實(shí)例化從?
setup?中返回的對(duì)象上的屬性返回并可以在模板中被訪問(wèn)時(shí)，它將自動(dòng)展開(kāi)為內(nèi)部值。不需要在模板中追加?.value
vue之前在組件編寫的時(shí)候，使用的是選項(xiàng)式API，例如下面的代碼
export default {
?name: 'Button',
?data() {
? ?return {
? ? ?count: 0
? ?}
?},
?method: {
? ?add() {
? ? ?this.count++
? ?}
?}}
作者：慕沐1355418
鏈接：https://www.imooc.com/article/322049
來(lái)源：慕課網(wǎng)
本文原創(chuàng)發(fā)布于慕課網(wǎng) ，轉(zhuǎn)載請(qǐng)注明出處，謝謝合作
使用組合式API重寫后，代碼編寫的風(fēng)格就會(huì)變成如下
import { ref } from 'vue';export default {
?setup() {
? ?const count = ref(0);
? ?const add = () => count.value++;
? ?return {
? ? ?count,
? ? ?add ? ?}
?}}
可以看出，使用composition api，狀態(tài)和方法的聲明都在setup函數(shù)實(shí)現(xiàn)。
setup函數(shù)是什么？
setup?函數(shù)是一個(gè)組件式API的入口，在組件創(chuàng)建之前執(zhí)行，可以在?setup?函數(shù)中定義組件的狀態(tài)和方法。
setup?函數(shù)接收兩個(gè)參數(shù)，一個(gè)是?props，一個(gè)是?context，?props?是響應(yīng)式的，所以不能使用解構(gòu)，可以用?toRefs?函數(shù)來(lái)完成此操作，context?則可以
setup?返回的對(duì)象會(huì)暴露給組件的（計(jì)算屬性，方法，生命周期鉤子等）以及組件的模板
setup?只能是同步的，不能是異步
例如
import { toRefs } from 'vue'export default {
?setup(props, context) {
? ?// const { name } = props; // 錯(cuò)誤的寫法
? ?const { name } = toRefs(props); // 正確的寫法
? ?const { attrs } = context; // 正確的寫法
? ?return {};
?}}
setup函數(shù)注冊(cè)生命周期鉤子
組合式 API 上的生命周期鉤子與選項(xiàng)式 API 的名稱相同，但前綴為?on：即?mounted?看起來(lái)會(huì)像?onMounted
這些函數(shù)接受一個(gè)回調(diào)，當(dāng)鉤子被組件調(diào)用時(shí)，該回調(diào)將被執(zhí)行
例如
import { ref, onMounted } from 'vue';export default {
?setup(props) {
? ?const list = ref([]);
? ?const getList = async () => {
? ? ?list.value = await fetchList({ id: props.id });
? ?}
? ?onMounted(getList);
? ?return {
? ? ?list,
? ? ?getList,
? ?}
?}}
ref函數(shù)是什么？
通過(guò)?ref?可以使變量具備響應(yīng)式特性，一個(gè)簡(jiǎn)單的例子
import { ref } from 'vue'
const counter = ref(0)
console.log(counter) // { value: 0 }
console.log(counter.value) // 0
counter.value++
console.log(counter.value) // 1
watch函數(shù)
上面實(shí)現(xiàn)了通過(guò)props來(lái)獲取調(diào)用?fetchList?列表獲取數(shù)據(jù)，如果要監(jiān)聽(tīng)?id?，當(dāng)?id?變化時(shí)響應(yīng)式獲取數(shù)據(jù)，可以使用?watch?函數(shù)，我們?yōu)樯厦婧瘮?shù)加入?watch?函數(shù)
import { ref, onMounted, watch，toRefs } from 'vue';export default {
?setup(props) {
? ?
? ?// 使用 toRefs 解構(gòu)
? ?const { id } = toRefs(props);
? ?const list = ref([]);
? ?const getList = async () => {
? ? ?list.value = await fetchList({ id });
? ?}
? ?onMounted(getList);
? ?// 監(jiān)聽(tīng) id 變化，重新獲取數(shù)據(jù)
? ?watch(id, getList);
? ?return {
? ? ?list,
? ? ?getList,
? ?}
?}}
獨(dú)立的computed屬性
上面已經(jīng)完成了組件的?data?，method，?watch?功能，接下來(lái)實(shí)現(xiàn)?computed?功能
import { ref, onMounted, watch，toRefs, computed } from 'vue';export default {
?setup(props) {
? ?
? ?// 使用 toRefs 解構(gòu)
? ?const { id } = toRefs(props);
? ?const list = ref([]);
? ?const getList = async () => {
? ? ?list.value = await fetchList({ id });
? ?}
? ?onMounted(getList);
? ?// 監(jiān)聽(tīng) id 變化，重新獲取數(shù)據(jù)
? ?watch(id, getList);
? ?// 查詢匹配的列表ist表
? ?const matchList = computed(() => {
? ? ?return list.value.filter(item => item.name.includes('interview.kelen.cc'))
? ?})
? ?return {
? ? ?list,
? ? ?getList,
? ?}
?}}
