最近 Vue 官方公布了 Vue 3.0 最重要的RFC：Function-based component API，并發布了兼容 Vue 2.0 版本的 plugin：vue-function-api，可用于提前體驗 Vue 3.0 版本的 Function-based component API。筆者出于學習的目的，提前在項目中嘗試了vue-function-api。
筆者計劃寫兩篇文章，本文為筆者計劃的第一篇，主要為筆者在體驗 Vue Function API 的學習心得。第二篇計劃寫閱讀vue-function-api的核心部分代碼原理，包括setup、observable、lifecycle。
本文閱讀時間約為15~20分鐘。
概述
Vue 2.x 及以前的高階組件的組織形式或多或少都會面臨一些問題，特別是在需要處理重復邏輯的項目中，一旦開發者組織項目結構組織得不好，組件代碼極有可能被人詬病為“膠水代碼”。而在 Vue 2.x 及之前的版本，解決此類問題的辦法大致是下面的方案：
筆者維護的項目也需要處理大量復用邏輯，在這之前，筆者一直嘗試使用mixin的方式來實現組件的復用。有些問題也一直會對開發者和維護者造成困惑，如一個組件同時mixin多個組件，很難分清對應的屬性或方法寫在哪個mixin里。其次，mixin的命名空間沖突也可能造成問題。難以保證不同的mixin不用到同一個屬性名。為此，官方團隊提出函數式寫法的意見征求稿，也就是RFC：Function-based component API。使用函數式的寫法，可以做到更靈活地復用組件，開發者在組織高階組件時，不必在組件組織上考慮復用，可以更好地把精力集中在功能本身的開發上。
注：本文只是筆者使用vue-function-api提前體驗 Vue Function API ，而這個 API 只是 Vue 3.0 的 RFC，而并非與最終 Vue 3.x API 一致。發布后可能有不一致的地方。
在 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}`);
}
);
// lifecycle
onMounted(() => {
console.log(`mounted`);
});
// expose bindings on render context
return {
count,
plusOne,
increment,
};
},
};
</script>
詳解
setup
setup函數是Vue Function API 構建的函數式寫法的主邏輯，當組件被創建時，就會被調用，函數接受兩個參數，分別是父級組件傳入的props和當前組件的上下文context。看下面這個例子，可以知道在context中可以獲取到下列屬性值：
const MyComponent = {
props: {
name: String
},
setup(props, context) {
console.log(props.name);
// context.attrs
// context.slots
// context.refs
// context.emit
// context.parent
// context.root
}
}
value & state
value函數創建一個包裝對象，它包含一個響應式屬性value：
那么為何要使用value呢，因為在JavaScript中，基本類型并沒有引用，為了保證屬性是響應式的，只能借助包裝對象來實現，這樣做的好處是組件狀態會以引用的方式保存下來，從而可以被在setup中調用的不同的模塊的函數以參數的形式傳遞，既能復用邏輯，又能方便地實現響應式。
直接獲取包裝對象的值必須使用.value，但是，如果包裝對象作為另一個響應式對象的屬性，Vue內部會通過proxy來自動展開包裝對象。同時，在模板渲染的上下文中，也會被自動展開。
import { state, value } from 'vue-function-api';
const MyComponent = {
setup() {
const count = value(0);
const obj = state({
count,
});
console.log(obj.count) // 作為另一個響應式對象的屬性，會被自動展開
obj.count++ // 作為另一個響應式對象的屬性，會被自動展開
count.value++ // 直接獲取響應式對象，必須使用.value
return {
count,
};
},
template: `<button @click="count++">{{ count }}</button>`,
};
如果某一個狀態不需要在不同函數中被響應式修改，可以通過state創建響應式對象，這個state創建的響應式對象并不是包裝對象，不需要使用.value來取值。
watch & computed
watch和computed的基本概念與 Vue 2.x 的watch和computed一致，watch可以用于追蹤狀態變化來執行一些后續操作，computed用于計算屬性，用于依賴屬性發生變化進行重新計算。
computed返回一個只讀的包裝對象，和普通包裝對象一樣可以被setup函數返回，這樣就可以在模板上下文中使用computed屬性。可以接受兩個參數，第一個參數返回當前的計算屬性值，當傳遞第二個參數時，computed是可寫的。
import { value, computed } from 'vue-function-api';
const count = value(0);
const countPlusOne = computed(() => count.value + 1);
console.log(countPlusOne.value); // 1
count.value++;
console.log(countPlusOne.value); // 2
// 可寫的計算屬性值
const writableComputed = computed(
// read
() => count.value + 1,
// write
val => {
count.value = val - 1;
},
);
watch第一個參數和computed類似，返回被監聽的包裝對象屬性值，不過另外需要傳遞兩個參數：第二個參數是回調函數，當數據源發生變化時觸發回調函數，第三個參數是options。其默認行為與 Vue 2.x 有所不同：
// double 是一個計算包裝對象
const double = computed(() => count.value * 2);
watch(double, value => {
console.log('double the count is: ', value);
}); // -> double the count is: 0
count.value++; // -> double the count is: 2
當watch多個被包裝對象屬性時，參數均可以通過數組的方式進行傳遞，同時，與 Vue 2.x 的vm.$watch一樣，watch返回取消監聽的函數：
const stop = watch(
[valueA, () => valueB.value],
([a, b], [prevA, prevB]) => {
console.log(`a is: ${a}`);
console.log(`b is: ${b}`);
}
);
stop();
注意：在RFC：Function-based component API初稿中，有提到effect-cleanup，是用于清理一些特殊情況的副作用的，目前已經在提案中被取消了。
生命周期
所有現有的生命周期都有對應的鉤子函數，通過onXXX的形式創建，但有一點不同的是，destoryed鉤子函數需要使用unmounted代替：
import { onMounted, onUpdated, onUnmounted } from 'vue-function-api';
const MyComponent = {
setup() {
onMounted(() => {
console.log('mounted!');
});
onUpdated(() => {
console.log('updated!');
});
// destroyed 調整為 unmounted
onUnmounted(() => {
console.log('unmounted!');
});
},
};
一些思考
上面的詳解部分，主要抽取的是 Vue Function API 的常見部分，并非RFC：Function-based component API的全部，例如其中的依賴注入，TypeScript類型推導等優勢，在這里，由于篇幅有限，想要了解更多的朋友，可以點開RFC：Function-based component API查看。個人也在Function-based component API討論區看到了更多地一些意見：
setup() {
const state = reactive({
count: 0,
});
const double = computed(() => state.count * 2);
function increment() {
state.count++;
}
return {
...toBindings(state), // retains reactivity on mutations made to `state`
double,
increment,
};
}
下一篇文章中，筆者將閱讀vue-function-api的核心部分代碼原理，包括setup、observable、lifecycle等，從內部探索 Vue Function API 可能帶給我們的改變。
當然，目前 Vue Function API 還處在討論階段，Vue 3.0 還處在開發階段，還是期待下半年 Vue 3.0 的初版問世吧，希望能給我們帶來更多的驚喜。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 www.polareal.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
