vue3 setup () 高級用法示例詳解
從 vue2 升級到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的選項(xiàng)式 API。這篇文章主要介紹了 vue3 setup () 高級用法，需要的朋友可以參考下
目錄
一、選項(xiàng)式 API 和 組合式 API 區(qū)別
二、setup 具體怎么用？
2.1、setup 什么時(shí)候執(zhí)行？
2.2、setup 數(shù)據(jù)和方法如何使用？
2.3、setup 內(nèi)部有 this 嗎？
2.5、setup 與鉤子函數(shù)關(guān)系
三、setup 參數(shù)
3.1、props
3.2、context
四、setup 特性總結(jié)
本篇文章干貨較多，建議收藏！
從 vue2 升級到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的選項(xiàng)式 API。由于選項(xiàng)式 API 一個(gè)變量存在于多處，如果出現(xiàn)問題時(shí)，就需要去多個(gè)函數(shù)內(nèi)檢查，項(xiàng)目較大時(shí)，遇到問題，增加排故的難度。所以 vue3 中新增了 setup 配置項(xiàng)，用它來寫組合式 API。
?
一、選項(xiàng)式 API 和 組合式 API 區(qū)別
有些同學(xué)稀里糊涂用了 vue 一年了，竟然不知道選項(xiàng)式 api ！你是那個(gè)同學(xué)嗎？是的話，趕緊收藏起來。
vue2 中的 Options API 就是選項(xiàng)式 api，一個(gè)中文，一個(gè)英文，怎么叫都可以。
在一個(gè) vue 文件內(nèi)，會有 data、methods、mounted、computed、watch 等等用來定義屬性和方法，共同來處理頁面邏輯，我們把這種方式稱為 Options API。
示例 1：計(jì)數(shù)器
<template>
<div>
?<button @click="add">+</button>
? {{num}} ?<button @click="reduce">-</button>
</div></template><script>export default {
data(){ ?return { ? num:0
?}
}, methods:{
?add(){ ? this.num++
?},
?reduce(){ ? this.num--
?}
}
}</script>
觀察上述示例，我們發(fā)現(xiàn) num 值的處理涉及到 data 和 methods 兩個(gè)選項(xiàng)，業(yè)務(wù)處理的比較分散，項(xiàng)目小了看著清晰明了，但是項(xiàng)目變大之后，data 和 methods 會包含很多屬性和方法，此時(shí)就很難分清哪個(gè)屬性對應(yīng)哪個(gè)方法。所以 vue3 新增 setup 寫組合式 API。
Vue3 的 Composition API 就是組合式 api。
組合式 api 就是一個(gè)功能所定義的 api 會放在一起，這樣子即使項(xiàng)目變大，功能增大，我們能夠很快找到功能相關(guān)的所有 api，不像 Options API 功能分散，需要改動時(shí)，需要多處查找過程比較困難。
示例 2：計(jì)數(shù)器
<template>
<div>
?<button @click="add">+</button>
? {{num}} ?<button @click="reduce">-</button>
</div></template><script>
import { ref } from 'vue'
export default{
?setup(){ ? const num = ref(1) ? return{
? ?num,
? ?add(){
? ? num.value++
? ?},
? ?reduce(){
? ? num.value--
? }
?}
}
}</script>
ref 是讓基礎(chǔ)數(shù)據(jù)類型具備響應(yīng)式的，下篇文章具體介紹它的用法，需要的同學(xué)可以點(diǎn)個(gè)關(guān)注不迷路！
用一張圖告訴你它們的區(qū)別：
?
二、setup 具體怎么用？
?
2.1、setup 什么時(shí)候執(zhí)行？
setup 用來寫組合式 api，從生命周期鉤子函數(shù)角度分析，相當(dāng)于取代了 beforeCreate 。會在 creted 之前執(zhí)行。
<script>
export default{
?created(){ ? console.log('created');
?},
?setup(){ ? console.log('setup');
?}
}</script>
執(zhí)行之后，setup 打印結(jié)果始終在前邊。
?
2.2、setup 數(shù)據(jù)和方法如何使用？
示例 3：直接定義使用變量
<template>
{{a}}</template><script>
export default{
?setup(){ ? const a = 0
?}
}</script>
運(yùn)行后發(fā)現(xiàn)結(jié)果異常：
runtime-core.esm-bundler.js?5c40:6584 [Vue warn]: Property "a" was accessed during render but is not defined on instance.
提示我們訪問的屬性 a 并沒有掛載到實(shí)例上。
setup 內(nèi)部的屬性和方法，必須 return 暴露出來，將屬性掛載到實(shí)例上，否則沒有辦法使用，上述代碼添加 return：
<script>
export default{
?setup(){ ? const a = 0
? return{
? ?a
? }
?}
}</script>
2.3、setup 內(nèi)部有 this 嗎？
自己在 setup 中打印下 this ，返回結(jié)果 是 undefined 。說明在 setup 內(nèi)部是不存在 this ，不能掛載 this 相關(guān)的東西。
?
2.4、setup 內(nèi)鉤子函數(shù)如何使用？
vue3 是可以兼容 vue2 的選項(xiàng)式寫法，所以 鉤子函數(shù)可以與 setup 并列存在，就相當(dāng)于 Options API。
示例 4：
export default{ setup(){ ?console.log('setup');
}, mounted(){ ?console.log('mounted');
}
}
ue3 新增的 setup () 函數(shù)用來寫組合式 api，所以不建議這樣寫代碼。所以需要使用 onXXX 一族的函數(shù)來注冊鉤子函數(shù)，注冊成功之后調(diào)用時(shí)傳遞的是一個(gè)回調(diào)函數(shù)。
示例 5：
import { onMounted } from "vue";export default{
setup(){
?const a = 0
?return{
? a
?},
?onMounted(()=>{ ? console.log("執(zhí)行");
})
}
}
注冊的這些生命周期鉤子函數(shù)只能在 setup 期間同步使用，因?yàn)樗鼈円蕾嚾謨?nèi)部狀態(tài)來定位當(dāng)前組件實(shí)例，不在當(dāng)前組件下調(diào)用函數(shù)時(shí)會拋出錯(cuò)誤。
其他的鉤子函數(shù)是一樣的，根據(jù)需要引入就好了。
?
2.5、setup 與鉤子函數(shù)關(guān)系
setup 與鉤子函數(shù)并列時(shí)，setup 不能調(diào)用生命周期相關(guān)函數(shù)，但生命周期可以調(diào)用 setup 相關(guān)的屬性和方法。
示例 6：
<template>
<button @click="log">點(diǎn)我</button></template><script>export default{
setup(){ ?const a = 0
?return{
? a
?}
}, methods:{
?log(){ ? console.log( this.$options.setup() );//返回一個(gè)對象
?}
}
}</script>
this.$options.setup () 返回的是一個(gè)大對象，該對象內(nèi)包含了 setup 內(nèi)的所有屬性和方法。
?
三、setup 參數(shù)
使用 setup 時(shí)，它將接收兩個(gè)參數(shù)：props 和 context 。
?
3.1、props
第一個(gè)參數(shù)是 props ，表示父組件給子組件傳值，props 是響應(yīng)式的，當(dāng)傳入新的 props 時(shí)，自動更新。
示例 7：
export default{ props: { ?msg: String, ?ans: String,
}, setup(props,context){ ?console.log(props);//Proxy {msg: "著急找對象", ans: "你有對象嗎？"}
},
}
因?yàn)?props 是響應(yīng)式的，不能使用 ES6 解構(gòu)，會消除 prop 的響應(yīng)特性，此時(shí)需要借用 toRefs 解構(gòu)。示例 8：
import { toRefs } from "vue"; export default{
?props: {
? msg: String,
? ans: String,
?},
?setup(props,context){ ? console.log(props); ? const { msg，ans } = toRefs(props) ? console.log(msg.value); //著急找對象
? console.log(ans.value); //你有對象嗎？
?},
}
使用組件時(shí)，經(jīng)常會遇到可選參時(shí)，有些地方需要傳遞某個(gè)值，有些時(shí)候不需要，該如何處理呢？
如果 ans 是一個(gè)可選參數(shù)，則傳入 props 中可能沒有 ans 。在這種情況下 toRefs 將不會為 ans 創(chuàng)建一個(gè) ref ，需要使用 toRef 代替它。
import { toRef } from "vue";
setup(props,context){ let ans ?= toRef(props ,'ans')// 不存在時(shí)，創(chuàng)建一個(gè)ans
console.log(ans.value);
}
3.2、context
context 上下文環(huán)境，其中包含了 屬性、插槽、自定義事件三部分。
setup(props,context){ const { attrs,slots,emit } = context // attrs 獲取組件傳遞過來的屬性值，
// slots 組件內(nèi)的插槽
// emit 自定義事件 子組件}
attrs 是一個(gè)非響應(yīng)式對象，主要接收 no-props 屬性，經(jīng)常用來傳遞一些樣式屬性。
slots 是一個(gè) proxy 對象，其中 slots.default () 獲取到的是一個(gè)數(shù)組，數(shù)組長度由組件的插槽決定，數(shù)組內(nèi)是插槽內(nèi)容。
setup 內(nèi)不存在 this，所以 emit 用來替換 之前 this.$emit 的，用于子傳父時(shí)，自定義事件觸發(fā)。
示例 9：
<template>
<div :style="attrs.style">
?<slot></slot> ?
?<slot name="hh"></slot>
?<button @click="emit('getVal','傳遞值')">子向父傳值</button>
</div> </template><script>import { toRefs,toRef } from "vue";export default{
setup(props,context){ ?const { attrs,slots,emit } = context ?// attrs 獲取組件傳遞過來 style 屬性
console.log('slots',slots.default());//插槽數(shù)組
console.log('插槽屬性',slots.default()[1].props); //獲取插槽的屬性 ?
return{
?attrs,
?emit
? }
?},
}</script>
tup 特性總結(jié)
1、這個(gè)函數(shù)會在 created 之前執(zhí)行，上述已解釋。
2、setup 內(nèi)部沒有 this，不能掛載 this 相關(guān)的東西。
3、setup 內(nèi)部的屬性和方法，必須 return 暴漏出來，否則沒有辦法使用。
4、setup 內(nèi)部數(shù)據(jù)不是響應(yīng)式的。
5、setup 不能調(diào)用生命周期相關(guān)函數(shù)，但生命周期函數(shù)可以調(diào)用 setup 內(nèi)的函數(shù)。
