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