萬萬沒想到，Vue3 的 setup 還能這么玩
點擊上方?前端瓶子君，關注公眾號
回復算法，加入前端編程面試算法每日一題群
一、前言
昨天講了什么是
組合式API，\# 馬上都2202年了你還不知道什么是Vue3的組合式API嗎？[2]今天就來聽我吹一吹vue3的setup都能怎么用
借用官網(wǎng)一句話
setup?選項是一個接收?props?和?context?的函數(shù)
也就是說它的基本寫法應該是這樣的
export?default{
????name:?'test',
????setup(props,context){
?????return?{}???//?這里返回的任何內容都可以用于組件的其余部分
????}
????//?組件的“其余部分”
}
復制代碼
接收一個props和context函數(shù)并且將setup內的內容通過return暴露給組件的其余部分。
二、setup注意點
由于在執(zhí)行 setup函數(shù)的時候，還沒有執(zhí)行 Created 生命周期方法，所以在 setup 函數(shù)中，無法使用 data 和 methods 的變量和方法
由于我們不能在 setup函數(shù)中使用 data 和 methods，所以 Vue 為了避免我們錯誤的使用，直接將 setup函數(shù)中的this 修改成了 undefined
三、定義響應式數(shù)據(jù)
ref reactive
vue3通過ref reactive來定義響應式數(shù)據(jù)
ref我們用來將基本數(shù)據(jù)類型定義為響應式數(shù)據(jù)，其本質是基于Object.defineProperty()重新定義屬性的方式來實現(xiàn)（ref更適合定義基本數(shù)據(jù)類型）
reactive用來將引用類型定義為響應式數(shù)據(jù)，其本質是基于Proxy實現(xiàn)對象代理
基本數(shù)據(jù)類型（單類型）：除Object。String、Number、boolean、null、undefined。 引用類型：object。里面包含的 function、Array、Date。
定義
復制代碼
正常執(zhí)行且輸入
方式五
我們還可以這樣寫，這里我定義一個reactive響應式對象，賦值給login變量，這個響應式對象內有我們登錄需要的參數(shù)、驗證和方法，這里我們全部放在login這個響應式對象內然后用toRefs及擴展運算符暴露出去
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>