1罗洗、setup的理解
setup組件選項(xiàng)在組件創(chuàng)建前執(zhí)行，一旦props被解析，并充當(dāng)Composition API的入口，也就是說組合API是在setup這個(gè)選項(xiàng)函數(shù)中使用的光羞。
setup函數(shù)的注意點(diǎn)
- 沒有this：由于在執(zhí)行setup的時(shí)候組件實(shí)例還沒創(chuàng)建成功，所以在setup中去打印this是undefined
- setup執(zhí)行時(shí)間是在beforeCreated鉤子函數(shù)之前執(zhí)行的
- setup函數(shù)不能為異步函數(shù)：如果寫為異步怀大，頁面可能會(huì)出現(xiàn)問題
- setup選項(xiàng)接受的兩個(gè)參數(shù)：props和context函數(shù)
2纱兑、setup函數(shù)的返回值
如果setup返回一個(gè)對象，會(huì)將對象合并到render context中去化借，此時(shí)就能夠在組件template模板中使用該對象的屬性潜慎。
<template>
<div class="about">
<h1>{{count}}</h1>
</div>
</template>
<script>
export default {
name:'About',
setup(){
// 組合api是在setup這個(gè)選項(xiàng)API中使用
return {
count: 10
}
}
}
</script>
3、返回渲染函數(shù)
setup中可以返回一個(gè)渲染函數(shù)，使用h去生成虛擬的DOM铐炫，Vue3.0支持直接return虛擬節(jié)點(diǎn)
注意：要從vue中引出來垒手，否則h是未定義的狀態(tài)
<template>
<div class="about">
<h1>{{count}}</h1>
</div>
</template>
<script>
import {h} from 'vue'
export default {
name:'About',
setup(){
return () => h('h1',{style:'color:red'},'這是createElement創(chuàng)建的DOM')
}
}
</script>
4、setup接受的參數(shù)arguments
使用setup時(shí)驳遵，接受兩個(gè)參數(shù)props和context(上下文)淫奔，因?yàn)閟etup中不再有this了，因此props接受的值可以做為參數(shù)傳過來堤结，通過參數(shù)props去拿。
props參數(shù)
setup函數(shù)中的第一個(gè)參數(shù)是props鸭丛，props是響應(yīng)式的竞穷，當(dāng)傳入新的props，將會(huì)自動(dòng)更新鳞溉，因?yàn)樵趕etup函數(shù)中瘾带，this并不是組件對象，因此無法向選項(xiàng)中通過this.prop去獲取組件傳遞的數(shù)據(jù)熟菲，所以在setup函數(shù)中看政，將props通過參數(shù)的方式傳遞進(jìn)來，同時(shí)抄罕，props是響應(yīng)式的允蚣，當(dāng)修改父組件中的count時(shí)，子組件的count會(huì)自動(dòng)發(fā)生變化呆贿。
父組件
<template>
<div class="home">
<children :count="count"/>
<button @click="change">+1</button>
</div>
</template>
<script>
import children from '../components/children'
import {ref} from 'vue'
export default {
components:{
children
},
setup(){
const count = ref(0);
const change = () => {
return count.value++;
}
return {
count,
change,
}
}
}
</script>
子組件寫法一
<template>
<div>
<h1>{{ count }}</h1>
</div>
</template>
<script>
import {computed, toRefs} from 'vue';
export default{
props:['count'],
setup(props,{ emit }){
let { count } = props;
console.log(props.count)
return {
count
}
}
}
</script>
如果是這么直接解構(gòu)去拿count的話嚷兔，那么父組件修改了的count的值，子組件是不會(huì)跟著發(fā)生變化的做入，也可以理解為此時(shí)的count失去了活性冒晰。
那么有兩種辦法讓子組件的數(shù)據(jù)激活，一種是toRefs()方法竟块，另外一種是computed計(jì)算屬性
方法一：toRefs(props)
<template>
<div>
<h1>{{ count }}</h1>
</div>
</template>
<script>
import {computed, toRefs} from 'vue';
export default{
props:['count'],
setup(props,{ emit }){
let { count } = toRefs(props);
console.log(props.count)
return {
count
}
}
}
</script>
方法二：computed()計(jì)算屬性
<template>
<div>
<h1>{{ count }}</h1>
</div>
</template>
<script>
import {computed} from 'vue';
export default{
props:['count'],
setup(props,{ emit }){
const count = computed({
get:()=>props.count,
})
return {
count
}
}
}
</script>
這樣壶运，父組件點(diǎn)擊按鈕加的值就會(huì)傳給子組件，顯示出來浪秘。
5蒋情、上下文context
setup函數(shù)接受的第二個(gè)參數(shù)是context，context是一個(gè)普通的javascript對象秫逝，他暴露出來的是三個(gè)組件的屬性恕出。
setup(props,context){
console.log('打印context:',context)
return{}
}
context 是一個(gè)普通的javascript對象，也就是說违帆，他不是響應(yīng)式的浙巫，因此，可以對其進(jìn)行ES6進(jìn)行解構(gòu)使用。
export default {
setup(props, { attrs, slots, emit }) {
//...
}
}
context對象中的attrs以及slots是具有狀態(tài)的對象的畴，非響應(yīng)式的渊抄。
