vue3的setup還能這么用
本文適合使用vue3開發(fā)項(xiàng)目以及對vue3感興趣的小伙伴閱讀。
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～
一、前言
vue3文檔地址：
https://v3.cn.vuejs.org/
本文來說一說vue3的
setup都能怎么用
借用官網(wǎng)一句話
setup?選項(xiàng)是一個接收?props?和?context?的函數(shù)
也就是說它的基本寫法應(yīng)該是這樣的
export?default{
????name:?'test',
????setup(props,context){
?????return?{}???//?這里返回的任何內(nèi)容都可以用于組件的其余部分
????}
????//?組件的“其余部分”
}
接收一個props和context函數(shù)并且將setup內(nèi)的內(nèi)容通過return暴露給組件的其余部分。
二、setup注意點(diǎn)
由于在執(zhí)行 setup函數(shù)的時候，還沒有執(zhí)行 Created 生命周期方法，所以在 setup 函數(shù)中，無法使用 data 和 methods 的變量和方法
由于我們不能在 setup函數(shù)中使用 data 和 methods，所以 Vue 為了避免我們錯誤的使用，直接將 setup函數(shù)中的this 修改成了 undefined? ?
三、定義響應(yīng)式數(shù)據(jù)
ref?reactive
vue3通過ref?reactive來定義響應(yīng)式數(shù)據(jù)
ref我們用來將基本數(shù)據(jù)類型定義為響應(yīng)式數(shù)據(jù)，其本質(zhì)是基于Object.defineProperty()重新定義屬性的方式來實(shí)現(xiàn)（ref更適合定義基本數(shù)據(jù)類型）
reactive用來將引用類型定義為響應(yīng)式數(shù)據(jù)，其本質(zhì)是基于Proxy實(shí)現(xiàn)對象代理
基本數(shù)據(jù)類型（單類型）：除Object。String、Number、boolean、null、undefined。 引用類型：object。里面包含的 function、Array、Date。
定義
復(fù)制代碼方式五
我們還可以這樣寫，這里我定義一個reactive響應(yīng)式對象，賦值給login變量，這個響應(yīng)式對象內(nèi)有我們登錄需要的參數(shù)、驗(yàn)證和方法，這里我們?nèi)糠旁?code style="margin: 3px;padding: 3px;outline: 0px;max-width: 100%;box-sizing: border-box !important;overflow-wrap: break-word !important;font-size: 14px;border-radius: 4px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(155, 110, 35);background-color: rgb(255, 245, 227);">login這個響應(yīng)式對象內(nèi)然后用toRefs及擴(kuò)展運(yùn)算符暴露出去
<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>