setup
- Vue3.0新增的配置項(xiàng)撑蒜，值為一個(gè)函數(shù)
- setup是所有Composition API的
- 組件中所用到的：數(shù)據(jù)哼绑，方法等等严嗜，均需要配置在setup函數(shù)中
- setup函數(shù)的兩種返回值：
- 若返回是一個(gè)對(duì)象旁涤，對(duì)象中的屬性今布，方法经备，在模板中軍可以直接使用
- 若返回一個(gè)渲染函數(shù)，則可以自定義渲染內(nèi)容
- setup的兩個(gè)注意點(diǎn)：
- setup的執(zhí)行時(shí)機(jī)：在beforeCreate之前執(zhí)行一次部默，this是undefined
- setup的參數(shù)：
- props：值為對(duì)象侵蒙，包含外部傳遞過(guò)來(lái)，且組件內(nèi)部申明接收了的屬性
- context：上下文對(duì)象
- attrs：值為對(duì)象傅蹂，包含組件外部傳遞過(guò)來(lái)纷闺，但是沒(méi)有在props中配置中申明的屬性，相當(dāng)于this.$attrs
- slots：收到的插槽的內(nèi)容份蝴，相當(dāng)于this.$slots
- emit：分發(fā)自定義時(shí)間的函數(shù)犁功，閑的剛玉this.$emit。（值得注意的是婚夫，Vue3中使用emit浸卦，需要使用emits去接收父組件傳過(guò)來(lái)的數(shù)據(jù)，和props差不多）
PS：
- 盡量不要與Vue2的配置項(xiàng)混用：
- Vue2配置項(xiàng)(data,methods,computed...)中可以訪問(wèn)到setup中的屬性案糙，方法限嫌。
- 但在setup中不能訪問(wèn)到Vue2中的配置
- 如果有重名，setup優(yōu)先
- setup函數(shù)不能是一個(gè)async函數(shù)时捌，因?yàn)榉祷刂挡辉谑且粋€(gè)return的對(duì)象怒医，而是promise，模板看不到return對(duì)象中的屬性
<template>
<h1>{{name}}</h1>
<button @click="sayHi"></button>
</template>
<script>
exprot default {
name: 'App',
setup(props,context) {
const name = "景天" // 不是響應(yīng)式的數(shù)據(jù)
function sayHi() {
console.log(`Hi,我是${name}`)
}
// 返回值是一個(gè)對(duì)象
return {
name,
sayHi
}
// 返回值是一個(gè)渲染函數(shù)
return () => h('h1','這是渲染函數(shù)渲染的內(nèi)容')
}
}
</script>
