vue3組合式API

阿新 • • 發佈：2021-07-28

vue3組合式API

為什麼要用組合式API，我們來看看它是如何解決vue2的侷限性的

1.vue2的侷限性

當元件內容越來越多，邏輯越來越複雜，可讀性就會降低，並且難以維護。

vue2元件採用配置式API，props,data,methods等相關的配置會被放在一起，導致同樣的功能塊分散，並和其他的功能塊混合。我們希望統一功能塊的程式碼可以放在一起，增加可讀性

vue2的程式碼複用機制存在缺點，（Mixins）

容易衝突

依賴關係不明確，不易維護

函式式的mixins不能在例項化過程中使用

vue2對ts的支援度不夠友好

2.組合式API的基本用法

組合式API是vue3新增的語法，它並沒有替代vue2的配置API，vue2原先的用法不變。組合式API只是更高階的語法

1. setup和ref方法

 1<template>
 2<div>
 3<p>Capacity:{{capacity}}</p>
 4<button@click="increaseCapacity()">IncreaseCapacity</button>
 5<h2>Attending</h2>
 6<ul>
 7<liv-for="(name,index)inattending" 
:key="index">{{name}}</li>
 8</ul>
 9</div>
10</template>
11
12<script>
13import{ref}from"vue";
14exportdefault{
15setup(){
16constcapacity=ref(4);
17functionincreaseCapacity(){
18capacity.value++;
19}
20constattending=ref(["Tim","Bob","Joe"]);
21return{capacity,attending,increaseCapacity};
22 
}
23};
24</script>

使用ref建立響應式資料，模板中使用ref物件會自動結構[ref].value，不需要手寫.value

2. reactive和computed方法

 1<template>
 2<p>SpacesLeft:{{spacesLeft}}outof{{capacity}}</p>
 3<h2>Attending</h2>
 4<ul>
 5<liv-for="(name,index)inattending":key="index">
 6{{name}}
 7</li>
 8</ul>
 9<button@click="increaseCapacity()">IncreaseCapacity</button>
10</template>
11
12<script>
13import{reactive,computed,toRefs}from"vue";
14exportdefault{
15setup(){
16constevent=reactive({
17capacity:4,
18attending:["Tim","Bob","Joe"],
19spacesLeft:computed(()=>{
20returnevent.capacity-event.attending.length;
21})
22});
23functionincreaseCapacity(){
24event.capacity++;
25}
26return{...toRefs(event),increaseCapacity};
27}
28};
29</script>

直接解構event會導致響應式失效，使用toRefs解構可以規避

3. 可複用的setup

 1<template>
 2...
 3</template>
 4<script>
 5importuseEventSpacefrom"@/use/event-space";
 6importuseMappingfrom"@/use/mapping";
 7exportdefault{
 8setup(){
 9return{...useEventSpace(),...useMapping()}
10}
11};
12</script>
13
14<!--event-space.js-->
15import{ref,computed}from"vue";
16exportdefaultfunctionuseEventSpace(){
17constcapacity=ref(4);
18constattending=ref(["Tim","Bob","Joe"]);
19constspacesLeft=computed(()=>{
20returncapacity.value-attending.value.length;
21});
22functionincreaseCapacity(){
23capacity.value++;
24}
25return{capacity,attending,spacesLeft,increaseCapacity};
26}

4. setup中的生命週期

vue3中 beforeDestroy 和 destroyed 更名為 beforeUnmount 和 unmounted
setup中使用生命週期函式需在函式前加on
setup中不需要使用beforeCreate和created周期函式，- setup中函式的執行順序是 beforeCreate() -> setup() -> created()
新增兩個生命週期：onRenderTracked 和 onRenderTriggered

5. watch

 1<template>
 2<div>
 3Searchfor<inputv-model="searchInput"/>
 4<div>
 5<p>Numberofevents:{{results}}</p>
 6</div>
 7</div>
 8</template>
 9<script>
10import{ref,watch}from"@vue/composition-api";
11importeventApifrom"@/api/event.js";
12exportdefault{
13setup(){
14constsearchInput=ref("");
15constresults=ref(0);
16watch(()=>{
17results.value=eventApi.getEventCount(searchInput.value);
18});
19<spanclass="hljs-keyword">return</span>{searchInput,results};
20}
21};
22</script>
23
24<!--watch傳參-->
25watch(searchInput,(newVal,oldVal)=>{
26...
27});
28watch([firstName,lastName],([newFirst,newLast],[oldFirst,oldLast])=>{
29...
30});