2019-9-1 seo達人
概述
Vue 2.x 及以前的高階組件的組織形式或多或少都會面臨一些問題，特別是在需要處理重復(fù)邏輯的項目中，一旦開發(fā)者組織項目結(jié)構(gòu)組織得不好，組件代碼極有可能被人詬病為“膠水代碼”。而在 Vue 2.x 及之前的版本，解決此類問題的辦法大致是下面的方案：
mixin
函數(shù)式組件
slots
筆者維護的項目也需要處理大量復(fù)用邏輯，在這之前，筆者一直嘗試使用mixin的方式來實現(xiàn)組件的復(fù)用。有些問題也一直會對開發(fā)者和維護者造成困惑，如一個組件同時mixin多個組件，很難分清對應(yīng)的屬性或方法寫在哪個mixin里。其次，mixin的命名空間沖突也可能造成問題。難以保證不同的mixin不用到同一個屬性名。為此，官方團隊提出函數(shù)式寫法的意見征求稿，也就是RFC：Function-based component API。使用函數(shù)式的寫法，可以做到更靈活地復(fù)用組件，開發(fā)者在組織高階組件時，不必在組件組織上考慮復(fù)用，可以更好地把精力集中在功能本身的開發(fā)上。
注：本文只是筆者使用vue-function-api提前體驗 Vue Function API ，而這個 API 只是 Vue 3.0 的 RFC，而并非與最終 Vue 3.x API 一致。發(fā)布后可能有不一致的地方。
在 Vue 2.x 中使用
要想提前在Vue 2.x中體驗 Vue Function API ，需要引入vue-function-api，基本引入方式如下：
import Vue from 'vue';
import { plugin as VueFunctionApiPlugin } from 'vue-function-api';
Vue.use(VueFunctionApiPlugin);
基本組件示例
先來看一個基本的例子：
<template>
<div>
<span>count is {{ count }}</span>
<span>plusOne is {{ plusOne }}</span>
<button @click="increment">count++</button>
</div>
</template>
<script>
import Vue from 'vue';
import { value, computed, watch, onMounted } from 'vue-function-api';
export default {
setup(props, context) {
// reactive state
const count = value(0);
// computed state
const plusOne = computed(() => count.value + 1);
// method
const increment = () => {
count.value++;
};
// watch
watch(
() => count.value 2,
val => {
console.log(`count 2 is ${val});<br /> }<br /> );<br /> // lifecycle<br /> onMounted(() => {<br /> console.log(mounted);<br /> });<br /> // expose bindings on render context<br /> return {<br /> count,<br /> plusOne,<br /> increment,<br /> };<br /> },<br /> };<br /> </script><br /> 詳解<br /> setup<br /> setup函數(shù)是Vue Function API 構(gòu)建的函數(shù)式寫法的主邏輯，當組件被創(chuàng)建時，就會被調(diào)用，函數(shù)接受兩個參數(shù)，分別是父級組件傳入的props和當前組件的上下文context。看下面這個例子，可以知道在context中可以獲取到下列屬性值<br /> <br /> const MyComponent = {<br /> props: {<br /> name: String<br /> },<br /> setup(props, context) {<br /> console.log(props.name);<br /> // context.attrs<br /> // context.slots<br /> // context.refs<br /> // context.emit<br /> // context.parent<br /> // context.root<br /> }<br /> }<br /> value & state<br /> value函數(shù)創(chuàng)建一個包裝對象，它包含一個響應(yīng)式屬性value：<br /> <br /> <br /> <br /> 那么為何要使用value呢，因為在JavaScript中，基本類型并沒有引用，為了保證屬性是響應(yīng)式的，只能借助包裝對象來實現(xiàn)，這樣做的好處是組件狀態(tài)會以引用的方式保存下來，從而可以被在setup中調(diào)用的不同的模塊的函數(shù)以參數(shù)的形式傳遞，既能復(fù)用邏輯，又能方便地實現(xiàn)響應(yīng)式。<br /> <br /> 直接獲取包裝對象的值必須使用.value，但是，如果包裝對象作為另一個響應(yīng)式對象的屬性，Vue內(nèi)部會通過proxy來自動展開包裝對象。同時，在模板渲染的上下文中，也會被自動展開。<br /> <br /> import { state, value } from 'vue-function-api';<br /> const MyComponent = {<br /> setup() {<br /> const count = value(0);<br /> const obj = state({<br /> count,<br /> });<br /> console.log(obj.count) // 作為另一個響應(yīng)式對象的屬性，會被自動展開<br /> <br /> obj.count++ // 作為另一個響應(yīng)式對象的屬性，會被自動展開<br /> count.value++ // 直接獲取響應(yīng)式對象，必須使用.value<br /> <br /> return {<br /> count,<br /> };<br /> },<br /> template:<button @click="count++">{{ count }}</button>,<br /> };<br /> 如果某一個狀態(tài)不需要在不同函數(shù)中被響應(yīng)式修改，可以通過state創(chuàng)建響應(yīng)式對象，這個state創(chuàng)建的響應(yīng)式對象并不是包裝對象，不需要使用.value來取值。<br /> <br /> watch & computed<br /> watch和computed的基本概念與 Vue 2.x 的watch和computed一致，watch可以用于追蹤狀態(tài)變化來執(zhí)行一些后續(xù)操作，computed用于計算屬性，用于依賴屬性發(fā)生變化進行重新計算。<br /> <br /> computed返回一個只讀的包裝對象，和普通包裝對象一樣可以被setup函數(shù)返回，這樣就可以在模板上下文中使用computed屬性。可以接受兩個參數(shù)，第一個參數(shù)返回當前的計算屬性值，當傳遞第二個參數(shù)時，computed是可寫的。<br /> <br /> import { value, computed } from 'vue-function-api';<br /> <br /> const count = value(0);<br /> const countPlusOne = computed(() => count.value + 1);<br /> <br /> console.log(countPlusOne.value); // 1<br /> <br /> count.value++;<br /> console.log(countPlusOne.value); // 2<br /> <br /> // 可寫的計算屬性值<br /> const writableComputed = computed(<br /> // read<br /> () => count.value + 1,<br /> // write<br /> val => {<br /> count.value = val - 1;<br /> },<br /> );<br /> watch第一個參數(shù)和computed類似，返回被監(jiān)聽的包裝對象屬性值，不過另外需要傳遞兩個參數(shù)：第二個參數(shù)是回調(diào)函數(shù)，當數(shù)據(jù)源發(fā)生變化時觸發(fā)回調(diào)函數(shù)，第三個參數(shù)是options。其默認行為與 Vue 2.x 有所不同：<br /> <br /> lazy：是否會在組件創(chuàng)建時就調(diào)用一次回調(diào)函數(shù)，與 Vue 2.x 相反，lazy默認是false，默認會在組件創(chuàng)建時調(diào)用一次。<br /> deep：與 Vue 2.x 的 deep 一致<br /> flush：有三個可選值，分別為 'post'（在渲染后，即nextTick后才調(diào)用回調(diào)函數(shù)），'pre'（在渲染前，即nextTick前調(diào)用回調(diào)函數(shù)），'sync'（同步觸發(fā)）。默認值為'post'。<br /> // double 是一個計算包裝對象<br /> const double = computed(() => count.value * 2);<br /> <br /> watch(double, value => {<br /> console.log('double the count is: ', value);<br /> }); // -> double the count is: 0<br /> <br /> count.value++; // -> double the count is: 2<br /> 當watch多個被包裝對象屬性時，參數(shù)均可以通過數(shù)組的方式進行傳遞，同時，與 Vue 2.x 的vm.$watch一樣，watch返回取消監(jiān)聽的函數(shù)：<br /> <br /> const stop = watch(<br /> [valueA, () => valueB.value],<br /> ([a, b], [prevA, prevB]) => {<br /> console.log(a is: ${a});<br /> console.log(b is: ${b});<br /> }<br /> );<br /> <br /> stop();<br /> 注意：在RFC：Function-based component API初稿中，有提到effect-cleanup，是用于清理一些特殊情況的副作用的，目前已經(jīng)在提案中被取消了。<br /> <br /> 生命周期<br /> 所有現(xiàn)有的生命周期都有對應(yīng)的鉤子函數(shù)，通過onXXX的形式創(chuàng)建，但有一點不同的是，destoryed鉤子函數(shù)需要使用unmounted代替：<br /> <br /> import { onMounted, onUpdated, onUnmounted } from 'vue-function-api';<br /> <br /> const MyComponent = {<br /> setup() {<br /> onMounted(() => {<br /> console.log('mounted!');<br /> });<br /> onUpdated(() => {<br /> console.log('updated!');<br /> });<br /> // destroyed 調(diào)整為 unmounted<br /> onUnmounted(() => {<br /> console.log('unmounted!');<br /> });<br /> },<br /> };<br /> 一些思考<br /> 上面的詳解部分，主要抽取的是 Vue Function API 的常見部分，并非RFC：Function-based component API的全部，例如其中的依賴注入，TypeScript類型推導等優(yōu)勢，在這里，由于篇幅有限，想要了解更多的朋友，可以點開RFC：Function-based component API查看。個人也在Function-based component API討論區(qū)看到了更多地一些意見：<br /> <br /> 由于底層設(shè)計，在setup取不到組件實例this的問題，這個問題在筆者嘗試體驗時也遇到了，期待正式發(fā)布的 Vue 3.x 能夠改進這個問題。<br /> <br /> 對于基本類型的值必須使用包裝對象的問題：在 RFC 討論區(qū)，為了同時保證TypeScript類型推導、復(fù)用性和保留Vue的數(shù)據(jù)監(jiān)聽，包裝屬性必須使用.value來取值是討論最激烈的<br /> <br /> 關(guān)于包裝對象value和state方法命名不清晰可能導致開發(fā)者誤導等問題，已經(jīng)在Amendment proposal to Function-based Component API這個提議中展開了討論：<br /> <br /> setup() {<br /> const state = reactive({<br /> count: 0,<br /> });<br /> <br /> const double = computed(() => state.count * 2);<br /> <br /> function increment() {<br /> state.count++;<br /> }<br /> <br /> return {<br /> ...toBindings(state), // retains reactivity on mutations made tostate`
double,
increment,
};
}
引入reactive API 和 binding API，其中reactive API 類似于 state API ， binding API 類似于 value API。
之前使用的方法名state在 Vue 2.x 中可能被用作組件狀態(tài)對象，導致變量命名空間的沖突問題，團隊認為將state API 更名為 reactive 更為優(yōu)雅。開發(fā)者能夠?qū)懗鯿onst state = ... ，然后通過state.xxxx這種方式來獲取組件狀態(tài)，這樣也相對而言自然一些。
value方法用于封裝基本類型時，確實會出現(xiàn)不夠優(yōu)雅的.value的情況，開發(fā)者可能會在直接對包裝對象取值時忘記使用.value，修正方案提出的 reactive API，其含義是創(chuàng)建響應(yīng)式對象，初始化狀態(tài)state就使用reactive創(chuàng)建，可保留每項屬性的getter和setter，這么做既滿足類型推導，也可以保留響應(yīng)式引用，從而可在不同模塊中共享狀態(tài)值的引用。
但reactive可能導致下面的問題，需要引入binding API。 解決，如使用reactive創(chuàng)建的響應(yīng)式對象，對其使用拓展運算符...時，則會丟失對象的getter和setter，提供toBindings方法能夠保留狀態(tài)的響應(yīng)式。
當然，目前 Vue Function API 還處在討論階段，Vue 3.0 還處在開發(fā)階段，還是期待下半年 Vue 3.0 的初版問世吧，希望能給我們帶來更多的驚喜。
藍藍設(shè)計的小編 http://www.lapeinture.cn