vue组合式api学习整理

一、组合式api两种方式，在构建项目模式下直接用组合式api，不用选项式

1、setup函数

<template>
    <div>{{a}}</div>
    <div>{{data.name}}</div>
    <button @click="get">点击</button>
    <HelloWorld/>
</template>

<script>
    import {'ref','reactive','onMounted'} from 'vue'
    import HelloWorld from 'HelloWorld.vue'//组件
    
    //需要注册组件
    components:{
        HelloWorld
    }
    setup(){
        const a = ref{100}
        const data = reactive{
            {
                name:'dysow'
            }
        }        
        const get = ()=>{
            a.value = 1000
        }        
        onMounted(()=>{
            consloe.log('mounted')
        })
        
        return {a,data,get}//这里必须对外暴露，否则无法在模板中渲染数据
    }
</script>

<style>

</style>

2、setup语法糖:无需暴露，组件引用无需注册可以直接使用,实际开发中用这种模式

<template>
    <div>{{a}}</div>
    <div>{{data.name}}</div>
    <button @click="get">点击</button>
    <HelloWorld/>/*直接使用组件*/
</template>

<script setup>
    import {'ref','reactive','onMounted'} from 'vue'
    import HelloWorld from 'HelloWorld.vue'//引入组件，但无需注册
   
        const a = ref{100}
        const data = reactive{
            {
                name:'dysow'
            }
        }        
        const get = ()=>{
            a.value = 1000
        }        
        onMounted(()=>{
            consloe.log('mounted')
        })                
</script>

<style>

</style>