Vue3的setup语法糖

Vue3的setup语法糖

在Vue3中setup函数可谓是组合函数展示的舞台，使用了vue3之后，我们的代码就会呈现下面的这样

<template>

</template>
<script>
    export default {
        name: "xxx",
        setup(){
            return {
                
            }
        }
    }
</script>

基本上所有的代码都在setup中，其他的比如computed计算属性，watch监视属性，生命周期钩子函数

这些都可以通过引入组合式API来实现。所以Vue3中就有这么一种十分优雅的写法

<template>

</template>
<script setup>
    
</script>

下面来说说setup语法糖有哪些用法和需要注意的地方

Methods和数据的使用

这就和setup函数中一样的，该怎么写还是怎么写

子组件的使用

引入组件只需要引入即可，不需要使用components去注册组件

父组件给子组件传值

Feacher.vue

<template>
<Child :msg="msg"/>
</template>
<script setup>
    import {ref} from 'vue';
    let msg = ref('父组件给子组件传值');
</script>

Child.vue

<template>
// 这里可以直接拿到msg，不需要用props.去取值
{{msg}}
</template>
<script setup>
    // 这里其实可以不引入defineProps，因为setup解糖的时候，会自动引入的，引入了当然也没问题
    import {defineProps} from 'vue';
    let props = defineProps({
        msg: String
    });
    // 下面如果还需要使用props中的数据，需要使用props对象去拿到
</script>

子组件给父组件传值

Feather.vue

<template>
<Child @getMsgFromChild="getMsgFromChild"/>
</template>
<script setup>
    const getMsgFromChild = (msg)=>{
        console.log('父组件接收到子组件传来的参数',msg);
    }
</script>

Child.vue

<template>
<input type="text" v-model="msg"/>
<button @click="sendMsg">点我给父组件传值</button>
</template>
<script setup>
    // 这里其实可以不引入defineEmits，因为setup解糖的时候，会自动引入的，引入了当然也没问题
    import {ref,defineEmits} from 'vue';
    let emits = defineEmits(['getMsgFromChild']);
    let msg = ref('');
    const sendMsg = ()=>{
        emits('getMsgFromChild',msg);
    }
</script>

祖孙组件传值

Feather.vue

<template>
<Child/>
</template>
<script setup>
    import {ref,provide} from 'vue';
    let msg = ref('msg');
    provide('pro',{
        msg,
        changeMsg: (newVal)=>{
            msg.value = newVal
        }
    })
</script>

Child.vue

<template>
<Grand/>
</template>
<script setup>

</script>

Grand.vue

<template>
</template>
<script setup>
    import {inject} from 'vue';
	let pro = inject('pro');
    pro.changeMsg('other');
</script>

computed、watch、钩子函数

这些都是和在setup函数中写的一样的

引入组合API即可import {computed、watch、 } from 'vue'

Vuex的使用

<template>
</template>
<script setup>
	import {useStore} from 'vuex';
	let store = useStore();
</script>

Vue-Router的使用

<template>
</template>
<script setup>
	import {useRouter,useRoute} from 'vue-router';
    let route = useRoute();
    let router = useRouter();
</script>

Await的使用

直接使用即可，不需要加async

<template>
</template>
<script setup>
    import _axios from "@/plugins/custom_axios";
    const data = await _axios.get('/categories');
</script>