setup()基本使用

    <script> 
            import { ref } feom 'vue'
            const count = ref(0)
            console.log(this.count)
            return {
                count
            }
    </script> 

這是組合api最基本的用法，ref（）方法是用來定義相應(yīng)式數(shù)據(jù)的。記住一定要retun 對象出來才能在模版中使用，才是相應(yīng)式的。
在其中調(diào)用可以直接使用this來調(diào)用

還有一種用法，是使用模版<script setup>

    <script setup> 
            import { ref } feom 'vue'
            const count = ref(0)
            console.log(count.value)
    </script> 

這是組合api最基本的用法，ref（）方法是用來定義相應(yīng)式數(shù)據(jù)的。在這里可以不需要retun因?yàn)檎Z法糖已經(jīng)幫你處理了。
在其中調(diào)用可以不能使用this來調(diào)用，調(diào)用的結(jié)果是undefined。需要通過.value來調(diào)用

訪問Props

    <script> 
    export default{
        props:{
            title: String
        },
        setup(props){
            console.log(props.title)
        }
    }
         
    </script> 

你要注意了，props在不解構(gòu)的情況下是響應(yīng)式的。一但解構(gòu)將不再是相應(yīng)式數(shù)據(jù)。建議通過props.來調(diào)用你的值
如果你想要通過解構(gòu)的方式，需要如下來再次給你的數(shù)據(jù)加上相應(yīng)式

    <script> 
    import { toRefs,toRef } feom 'vue'
    export default{
        props:{
            title: String
        },
        setup(props){
           const { title } = toRefs(props)
           const title = toRef(props,'title')
        }
    }
         
    </script> 

那么toRefs和toRef有什么區(qū)別呢

toRefs是給可枚舉的對象添加響應(yīng)式的，如果是基本類型或者不存在的不可能枚舉的建議使用toRef來創(chuàng)建

setup上下文

傳入setup函數(shù)的第二個(gè)參數(shù)是一個(gè)setup上下文對象，具體如何上代碼

    <script> 
    import { toRefs,toRef } feom 'vue'
    export default{
        props:{
            title: String
        },
        setup(props，context){
            // 透傳Attributes (非響應(yīng)式的對象，等價(jià)于$attrs)
           console.log(context.attrs)
            // 插槽 (非響應(yīng)式的對象，等價(jià)于$slotts)
           console.log(context.slotts)
            // 觸發(fā)事件 (非響應(yīng)式的對象，等價(jià)于$emit)
           console.log(context.emit)
            // 暴露公共屬性 (非響應(yīng)式的對象，等價(jià)于$expose)
           console.log(context.expose)
        }
    }
         
    </script> 

那么在setup語法糖<script setup> </script> 中如何使用的呢?？聪旅娲a!

    <script setup> 
    import { defineProps,defineEmits,useAttrs,useSlots } feom 'vue'
    // 獲取 props
    const props = defineProps({
        title:String
    })
    // 獲取emit 方法，入?yún)⑹且粋€(gè)數(shù)組支持多個(gè)輸入
   const emit =defineProps(["onFn1","onFn2"])
    // 調(diào)用方式
    emit("onFn1",123)    
    emit("onFn2",234)    

    // 獲取 $attrs
    const attrs = useAttrs()
    // 獲取$slots
    const slots= useSlots()

    </script> 

在這里特別提醒：我們使用setup語法糖相當(dāng)于閉包，處理當(dāng)前的template模版能訪問誰度都訪問不到包括使用ref訪問子組件的方式所以有了如下api

    <script setup> 
    import { defineExpose} feom 'vue'
    const a = 1
    const b = 2
    // 這個(gè)時(shí)候通過 defineExpose將a暴露出去了就能通過ref訪問到了，但是b不行
    defineExpose({
        a
    })

    </script> 

那么我們?nèi)绾潍@取DOM元素調(diào)用DOM元素呢

1. 語法糖 <p ref="refName"> 調(diào)用 const refName = ref() 這樣就行了只要保持和你在模版中的命名一致就行
2. 非語法糖就更加簡單和vue2 保持一致 可以直接 this.refs.refName