15 分鐘掌握vue-next函數(shù)式api(小結(jié))
寫(xiě)在前面
在分享 vue-next 各個(gè)子模塊的實(shí)現(xiàn)之前,我覺(jué)的有必要比較全面的整理下 vue-next 中提出的函數(shù)式 api,了解這些的話,無(wú)論是對(duì)于源碼的閱讀,還是當(dāng)正式版發(fā)布時(shí)開(kāi)始學(xué)習(xí),應(yīng)該都會(huì)有起到一定的輔助作用。
類(lèi)似的東西在網(wǎng)上有很多,只是會(huì)比較零碎,同時(shí)有些也相對(duì)過(guò)時(shí)了,當(dāng)然當(dāng)前整理的這些也有可能會(huì)過(guò)時(shí),畢竟代碼還處于 pre-alpha 的階段,但其中的設(shè)計(jì)思想應(yīng)該是不會(huì)改變了。
往期文章
15 分鐘掌握 vue-next 響應(yīng)式原理
vue-next/runtime-core 源碼閱讀指南
setup
setup 會(huì)作為編寫(xiě)組件業(yè)務(wù)邏輯的主戰(zhàn)場(chǎng),各種 hook 類(lèi)型的方法均需要在 setup 這個(gè)作用域下調(diào)用,直接來(lái)看 RFC 中的例子:
<template> <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> </template> <script> import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count \* 2) }) function increment() { state.count++ } return { state, increment } } } </script>
其代碼結(jié)構(gòu)看起來(lái)和 vue2 基本保持一致,不過(guò)有以下幾點(diǎn)需要注意:
- setup 本身的調(diào)用時(shí)機(jī),從目前的源碼來(lái)看,介于 beforeCreate 和 created 這兩個(gè)生命周期之間,言外之意,就是你無(wú)法在這里使用 this 指向當(dāng)前組件實(shí)例
- 對(duì)于 state 的聲明,我們使用 reactive 這個(gè) api 來(lái)構(gòu)造,對(duì)于 computed state 的聲明,使用 computed,兩者本質(zhì)上均是 Proxy 對(duì)象
- 對(duì)于組件方法的聲明,我們直接通過(guò)聲明普通函數(shù)的方式進(jìn)行聲明即可,對(duì)于 state 的變更,直接通過(guò)閉包使用 reactive 返回的 Proxy 對(duì)象即可
- setup 的返回值被稱(chēng)作 render context,顧名思義,就是模板中可以訪問(wèn)到的各種數(shù)據(jù)和方法的上下文對(duì)象,我在之前的文章中曾提及,模板在解析數(shù)據(jù)時(shí),會(huì)優(yōu)先考慮從 data 對(duì)象取值,之后就是這個(gè) render context 了
- 除了返回 render context,還可以返回模板渲染函數(shù),對(duì),就是那個(gè) h(...),這種形式對(duì)應(yīng)的情況是,當(dāng)我們沒(méi)有聲明 template 屬性時(shí)
在 vue-next 中,我們直接從 vue 導(dǎo)入 reactive 、computed 以及其他的 api 即可,如果在 vue2 版本上,我們還可以通過(guò)使用 composition-api 這個(gè) plugin 來(lái)使用這些 api。
state
聲明 state 主要有以下幾種形式。
基礎(chǔ)類(lèi)型
基礎(chǔ)類(lèi)型可以通過(guò) ref 這個(gè) api 來(lái)聲明,如下:
import { ref } from "vue"; export default { setup() { const count = ref(0); function inc() { count.value++; } return { count, inc }; } };
之所以要通過(guò) ref,是因?yàn)?js 中的基礎(chǔ)類(lèi)型傳值不是引用傳值,因此 vue-next 內(nèi)部會(huì)自動(dòng)將它封裝為一個(gè) ref 對(duì)象,其值指向原始值。當(dāng)然,ref 指向引用類(lèi)型也是沒(méi)有問(wèn)題的,其 value 指向引用類(lèi)型變量的引用。
引用類(lèi)型
引用類(lèi)型除了可以使用 ref 來(lái)聲明,也可以直接使用 reactive,如下:
import { reactive } from "vue"; export default { setup() { const state = reactive({ count: 0 }); function inc() { state.count++; } return { state, inc }; // 或者通過(guò) toRefs 方法 // return { ...toRefs(state), inc }; } };
這里使用 toRefs 的原因主要是因?yàn)?,如果?reactive 產(chǎn)生的對(duì)象,由于我們要只是保存對(duì)于該 Proxy 對(duì)象的引用,我們無(wú)法使用解構(gòu)來(lái)將它 flat,而 toRefs 會(huì)將每一個(gè)屬性在內(nèi)部包裹為一個(gè) ref 對(duì)象。
props
對(duì)于 prop 可以通過(guò)如下代碼聲明及使用:
export default { props: { count: Number }, setup(props) { watch(() => { console.log(\`count is: \` + props.count) }) } }
這里可以發(fā)現(xiàn)其實(shí)和 vue2 中聲明的方式基本一樣,但值得注意的是,在 vue-next 中,props 的類(lèi)型聲明不是必須的,如果你使用 typescript,完全可以改寫(xiě)為如下的版本:
interface PropTypesI { count: number } export default { setup(props: PropTypesI) { watch(() => { console.log(\`count is: \` + props.count) }) } }
除此之外,還可以直接通過(guò) watch 方法來(lái)觀察某個(gè) prop 的變動(dòng),這是為什么呢?答案非常簡(jiǎn)單,就是 props 本身在源碼中,也是一個(gè)被 reactive 包裹后的對(duì)象,因此它具有響應(yīng)性,所以在 watch 方法中的回調(diào)函數(shù)會(huì)自動(dòng)收集依賴,之后當(dāng) count 變動(dòng)時(shí),會(huì)自動(dòng)調(diào)用這些回調(diào)邏輯。
context
在 setup 那一小節(jié)中,我們知道,setup 在調(diào)用時(shí),組件實(shí)例還未創(chuàng)建,那意味著我們無(wú)法使用 this 訪問(wèn)當(dāng)前實(shí)例,那我想通過(guò) this 在 vue2 中訪問(wèn)一些內(nèi)置屬性,怎么辦?比如 attrs 或者 emit。我們可以通過(guò) setup 的第二個(gè)參數(shù):
setup(props, context) { do anything... }
這個(gè) context 對(duì)象也是一個(gè) Proxy 對(duì)象,當(dāng)我們通過(guò) context.attrs 訪問(wèn)其屬性時(shí),本質(zhì)上代理對(duì)象會(huì)將訪問(wèn)指向組件的內(nèi)部實(shí)例(即之間文章中提及的 componentInternalInstance)。
生命周期
每一個(gè) vue2 中的組件生命周期函數(shù),當(dāng)前都對(duì)應(yīng)一個(gè)生命周期 hook,比如:
import { onMounted, onUpdated, onUnmounted } from "vue"; setup() { onMounted(() => { ... }); onUpdated(() => { ... }); onUnmounted(() => { ... }); }
這里值得注意的一點(diǎn)在于,對(duì)于 beforeCreate 和 created 生命周期,雖然有響應(yīng)的 hook,但是我覺(jué)的沒(méi)有必要單獨(dú)使用了,因?yàn)檫@些邏輯代碼大部分是一些初始化邏輯的代碼,直接寫(xiě)在 setup 方法中即可。
如何復(fù)用代碼
在這個(gè)基礎(chǔ)上,復(fù)用代碼的方式也不再像 vue2 中的那樣,通過(guò) mixin 或者 HOC 來(lái)達(dá)到復(fù)用代碼的目的,這里稍微說(shuō)一下,這些復(fù)用代碼方式中比較顯著的缺點(diǎn)有:
- 隱藏了數(shù)據(jù)來(lái)源,主要體現(xiàn)在 mixin 中
- 會(huì)犧牲一些性能,主要體現(xiàn)在 HOC 中
- 可能會(huì)遇到命名沖突問(wèn)題,主要體現(xiàn)在 mixin 中
在 vue-next 中,復(fù)用代碼的邏輯本質(zhì)上是利用這些 hook 來(lái)拆分業(yè)務(wù)邏輯與狀態(tài),如果你比較熟悉 react hooks 的話,應(yīng)該很快就能明白我指的是什么意思。如果我們將邏輯都寫(xiě)在 setup 方法中,很快代碼就會(huì)變得難以維護(hù),在這方面,我們可以將一些耦合在一起的代碼抽離出來(lái),同時(shí)以 use 前綴命名,聲明一個(gè)自定義的 hook,如下:
export default { setup() { const data = useSearch() const { sortedData, sort } = useSorting(data) return { data, sortedData, sort } } } function useSearch() { ...fetch data } function useSort(data) { ...sort data }
除了以 inline 的方式來(lái)聲明,還可以將這些自定義的 hook 聲明在單獨(dú)的文件中,直接通過(guò) import 導(dǎo)入即可,比如:
import useSearch from '@hooks/search' import useSort from '@hooks/sort'
與 react hooks 對(duì)比
vue-next 在這方面借鑒了 react hooks 的設(shè)計(jì)思想,但是從實(shí)現(xiàn)層來(lái)講,它們是不一樣的,主要有以下幾點(diǎn):
- vue-next 不依賴于其調(diào)用順序,而 react 依賴
- vue-next 提供了生命周期方法,而 react 刻意模糊生命周期的概念
- vue-next 基于響應(yīng)式系統(tǒng)實(shí)現(xiàn),意味它的依賴不需要顯示聲明(而且是自動(dòng)的),而 react 需要手動(dòng)聲明依賴數(shù)組
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vuejs選中當(dāng)前樣式active的實(shí)例
今天小編就為大家分享一篇vuejs選中當(dāng)前樣式active的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue利用better-scroll實(shí)現(xiàn)輪播圖與頁(yè)面滾動(dòng)詳解
在我們?nèi)粘5捻?xiàng)目開(kāi)發(fā)中,處理滾動(dòng)和輪播圖是再常見(jiàn)不過(guò)的需求了,下面這篇文章主要給大家介紹了關(guān)于vue利用better-scroll實(shí)現(xiàn)輪播圖與頁(yè)面滾動(dòng)的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),需要的朋友們下面來(lái)一起看看吧。2017-10-10vue2如何實(shí)現(xiàn)vue3的teleport
這篇文章主要介紹了vue2如何實(shí)現(xiàn)vue3的teleport,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue實(shí)現(xiàn)購(gòu)物車(chē)全部功能的簡(jiǎn)單方法
vue是前端輕量級(jí)MVVM框架,入門(mén)門(mén)檻相對(duì)較低,今天用Vue做一個(gè)購(gòu)物車(chē)實(shí)例,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)購(gòu)物車(chē)全部功能的簡(jiǎn)單方法,需要的朋友可以參考下2021-07-07vue2/vue3路由權(quán)限管理的方法實(shí)例
最近用vue框架做了個(gè)后臺(tái)管理項(xiàng)目,涉及權(quán)限,所以下面這篇文章主要給大家介紹了關(guān)于vue2/vue3路由權(quán)限管理的相關(guān)資料,需要的朋友可以參考下2021-06-06vue計(jì)算屬性想要傳入?yún)?shù)如何解決
這篇文章主要介紹了vue計(jì)算屬性想要傳入?yún)?shù)如何解決問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01