vue3的setup還能這么用
本文適合使用vue3開發(fā)項目以及對vue3感興趣的小伙伴閱讀。
歡迎關(guān)注前端早茶,與廣東靚仔攜手共同進階~
一、前言
vue3文檔地址:
https://v3.cn.vuejs.org/
本文來說一說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久久久久久久-国产乱码精品一区二区三区亚洲人-欧美熟妇一区二区三区蜜桃视频
