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ù)。