本文來說一說vue3的setup都能怎么用

借用官網(wǎng)一句話

setup?選項是一個接收?props?和?context?的函數(shù)

也就是說它的基本寫法應該是這樣的

export?default{
????name:?'test',
????setup(props,context){

?????return?{}???//?這里返回的任何內(nèi)容都可以用于組件的其余部分
????}
????//?組件的“其余部分”
}

接收一個props和context函數(shù)并且將setup內(nèi)的內(nèi)容通過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ù)，其本質(zhì)是基于Object.defineProperty()重新定義屬性的方式來實現(xiàn)（ref更適合定義基本數(shù)據(jù)類型）

reactive用來將引用類型定義為響應式數(shù)據(jù)，其本質(zhì)是基于Proxy實現(xiàn)對象代理

• 基本數(shù)據(jù)類型（單類型）：除Object。String、Number、boolean、null、undefined。
• 引用類型：object。里面包含的 function、Array、Date。

定義

復制代碼

方式五

我們還可以這樣寫，這里我定義一個reactive響應式對象，賦值給login變量，這個響應式對象內(nèi)有我們登錄需要的參數(shù)、驗證和方法，這里我們?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這個響應式對象內(nèi)然后用toRefs及擴展運算符暴露出去

感谢您访问我们的网站，您可能还对以下资源感兴趣：
国产秋霞理论久久久电影-婷婷色九月综合激情丁香-欧美在线观看乱妇视频-精品国avA久久久久久久-国产乱码精品一区二区三区亚洲人-欧美熟妇一区二区三区蜜桃视频