vue3組合API（setup函式,系列二）

1，用vue2.x，實現乙個todos

從**中可以看到，vue2,資料和業務分離了，有新增功能，有刪除功能（直接點 li 標籤就刪除它）。都是標準的方案，沒啥可說的。

重點不是這個 todo list 應用，重點是，vue3 期望用組合api 的方式來解決乙個應用中，資料和功能分離的問題。即方法和 data 裡的資料隔了一層進行呼叫的問題。

2. vue3組合api

}
"myfn
">按鈕

什麼是setup，什麼是ref，return的又是啥玩意。

關於ref，可以參閱這篇文章,但我估計沒有 ts 基礎的人看不大明白，我直接拋結論：

ref是這樣的一種資料結構：它有個key為symbol的屬性做型別標識，有個屬性value用來儲存資料。這個資料可以是任意的型別，唯獨不能是被巢狀了ref型別的型別。

ref型別的資料，是一種響應式的資料。

ref寫法簡單，但也有弊端，它只能監聽一些如數字、字串、布林之類的簡單資料。複雜資料需要用到以後講的reactive。（實際上也可以用ref來封裝物件，只不過在訪問上多一層value，稍微麻煩了一些）。

setup，就是我們最近老是能聽到的 composition api，組合式 api。關於這個 api 的細節，還請參閱官方文件，這裡我只期望說一下簡單的內容。

setup選項應該是乙個接受props和context的函式。此外，我們從setup返回的所有內容都將暴露給元件的其餘部分 (計算屬性、方法、生命週期鉤子等等) 以及元件的模板。

也就是說，setup中建立並 return 的所有東西，都將被得到外部的解析，無論是過去在data中建立的資料也好，還是在methods建立的方法也好，都將變成允許被響應式地使用，彷彿 vue2 中的這些 api 都被融合在一起了一樣，而實際上 vue3 也是為了實現這個目的。

有了這兩點認識（ref和setup），我想上面的**就變得簡單了起來。回到剛剛的 todo list，我們用這個 api 來實現試一下。

這裡我們首先實現了remove方法。現在實現add方法

和最開始我們寫的 todo list 在方法上基本一致。而這些都不是重點，重點是通過這種組合 api 的方式，允許我們對資料和方法進行組合的包裝，就像這樣

原始資料和方法直接被定義到export default外面了。值得注意的是，由於存在資料傳值，記得要為方法新增引數，這裡新增的引數是state，否則會找不到另乙個方法的資料的。

再進一步，你可以將相關的資料和方法全都放在檔案裡，用export和import來進行交流

rem.js檔案

import  from
'vue';
function useremovestudent() ,,,
]});
function remstu(index) 
return;}
export 
default useremovestudent;

add.js

import  from
'vue';
function useaddstudent(state) 
});function addstu(e) , state2.stu);
state.stus.push(stu);
state2.stu.id = ''
; state2.stu.name = ''
; state2.stu.age = ''
; }
return
}export 
default useaddstudent;

vue3組合API（setup函式,系列二）

vue3組合API注意點（系列三）

vue3 可復用組合

Vue 3 元件註冊

vue3組合API（setup函式,系列二）

vue3組合API注意點（系列三）

vue3 可復用 組合

Vue 3 元件註冊

相關推薦

vue3 可復用組合