組合api、setup()用法

setup()是組合API(Composition API)入口

一惹资、組合試API和選項試API

? ? vue2中的Options API就是選項API,vue3則用的是組合API.

? ? 在一個 vue 文件內(nèi)填物,會有 data、methods肖抱、mounted、computed异旧、watch 等等用來定義屬性和方法意述,共同來處理頁面邏輯,我們把這種方式稱為 Options API。

? ? 把所有的功能都寫在一個模塊中(寫在setup()中)荤崇,就是組合API(Composition API)拌屏。

二、setup()語法

? ? 1术荤、執(zhí)行階段

? ? ? ? setup()在created前執(zhí)行倚喂,在beforcreated后執(zhí)行。

? ? 2喜每、數(shù)據(jù)如何使用

? ? ? ? setup()中的數(shù)據(jù)不是響應式的务唐,所以要引入ref,然后所有的數(shù)據(jù)都要return出來次啊能使用雳攘,setup中是沒有this的带兜,如下:

? ??????import {ref,onMounted }from 'vue'

????????setup(){//在created前執(zhí)行

????????????return{//必須return暴露出來? 才能使用

? ? ????????????num,

????????????????}

????????????},

? ? ? 3、鉤子函數(shù)的使用

? ??????vue3 是可以兼容 vue2 的選項式寫法吨灭,所以 鉤子函數(shù)可以與 setup 并列存在刚照,就相當于 Options API。

? ??????vue3 新增的 setup() 函數(shù)用來寫組合式 api喧兄,所以不建議寫成并列无畔。所以需要使用 onXXX 一族的函數(shù)來注冊鉤子函數(shù),注冊成功之后調(diào)用時傳遞的是一個回調(diào)函數(shù)吠冤,方法也可以直接return出來

?import {ref,onMounted }from 'vue'????????

setup(){//在created前執(zhí)行

? ????const num=ref(1);//ref基礎數(shù)據(jù)類型具備響應式

? ????onMounted(()=>{//生命周期鉤子

? ? ? ????console.log('這是onMounted'+num.value)

????})

????const methods={//方法的使用

? ? ????thods(){

????alert('這是methods')

????}

????}

????return{//必須return暴露出來? 才能使用

? ? ????num,

? ? ????add(){

????????????num.value++

????????},

? ? ????...methods

}

},

4浑彰、setup 參數(shù)

? ? 這里簡單寫一下,后面組件部分會詳細介紹

????使用setup 時拯辙,它將接收兩個參數(shù):props 和 context?

? ??props :表示父組件給子組件傳值郭变,props 是響應式的,當傳入新的 props 時涯保,自動更新诉濒。

? ??context :context 上下文環(huán)境,其中包含了 屬性夕春、插槽未荒、自定義事件三部分。

三及志、setup 特性總結

1片排、這個函數(shù)會在 created 之前執(zhí)行,上述已解釋速侈。

2率寡、setup 內(nèi)部沒有 this,不能掛載 this 相關的東西锌畸。

3勇劣、setup 內(nèi)部的屬性和方法,必須 return 暴漏出來,否則沒有辦法使用比默。

4幻捏、setup 內(nèi)部數(shù)據(jù)不是響應式的。

5命咐、setup不能調(diào)用生命周期相關函數(shù)篡九,但生命周期函數(shù)可以調(diào)用setup內(nèi)的函數(shù)。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末醋奠,一起剝皮案震驚了整個濱河市榛臼,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌窜司,老刑警劉巖沛善,帶你破解...
    沈念sama閱讀 222,252評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異塞祈,居然都是意外死亡金刁,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評論 3 399
  • 文/潘曉璐 我一進店門议薪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來尤蛮,“玉大人,你說我怎么就攤上這事斯议〔蹋” “怎么了?”我有些...
    開封第一講書人閱讀 168,814評論 0 361
  • 文/不壞的土叔 我叫張陵哼御,是天一觀的道長坯临。 經(jīng)常有香客問我,道長艇搀,這世上最難降的妖魔是什么尿扯? 我笑而不...
    開封第一講書人閱讀 59,869評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮焰雕,結果婚禮上衷笋,老公的妹妹穿的比我還像新娘。我一直安慰自己矩屁,他們只是感情好辟宗,可當我...
    茶點故事閱讀 68,888評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著吝秕,像睡著了一般泊脐。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上烁峭,一...
    開封第一講書人閱讀 52,475評論 1 312
  • 那天容客,我揣著相機與錄音秕铛,去河邊找鬼。 笑死缩挑,一個胖子當著我的面吹牛但两,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播供置,決...
    沈念sama閱讀 41,010評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼谨湘,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了芥丧?” 一聲冷哼從身側響起紧阔,我...
    開封第一講書人閱讀 39,924評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎续担,沒想到半個月后擅耽,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,469評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡赤拒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,552評論 3 342
  • 正文 我和宋清朗相戀三年秫筏,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挎挖。...
    茶點故事閱讀 40,680評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖航夺,靈堂內(nèi)的尸體忽然破棺而出蕉朵,到底是詐尸還是另有隱情,我是刑警寧澤阳掐,帶...
    沈念sama閱讀 36,362評論 5 351
  • 正文 年R本政府宣布始衅,位于F島的核電站,受9級特大地震影響缭保,放射性物質(zhì)發(fā)生泄漏汛闸。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,037評論 3 335
  • 文/蒙蒙 一艺骂、第九天 我趴在偏房一處隱蔽的房頂上張望诸老。 院中可真熱鬧,春花似錦钳恕、人聲如沸别伏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽厘肮。三九已至,卻和暖如春睦番,著一層夾襖步出監(jiān)牢的瞬間类茂,已是汗流浹背耍属。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留巩检,地道東北人恬涧。 一個月前我還...
    沈念sama閱讀 49,099評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像碴巾,于是被迫代替她去往敵國和親溯捆。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,691評論 2 361

推薦閱讀更多精彩內(nèi)容