Vue3官方提供了 script setup 语法糖
只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。如下：
<template>
<my-component :num="num" @click="addNum" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import MyComponent from './MyComponent .vue';
// 像在平常的setup中一样的写,但是不需要返回任何变量
const num= ref(0) //在此处定义的 num 可以直接使用
const addNum= () => { //函数也可以直接引用,不用在return中返回
num.value++
}
</script>
因为没有了setup函数，那么props，emit，attrs怎么获取呢
setup script语法糖提供了新的API来供我们使用
defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。
//父组件
<template>
<my-son foo="" @change="childClick" />
</template>
<script lang="ts" setup>
import MySon from "./MySon.vue";
let childClick = (e: any):void => {
console.log(e); //
};
</script>
//子组件
<template>
<span @click="sonClick">信息:{{ props.foo }}</span>
</template>
<script lang="ts" setup>
import { defineEmits, defineProps} from "vue";
const emit = defineEmits(["change"]); // 声明触发事件 change
const props = defineProps({ foo: String }); // 获取props
console.log(props)
const sonClick = () =>{
emit('change' , props.foo)
}
</script>
总结
1、语法糖就是setup()简写
2、在语法糖中使用变量可以直接使用
3、组件不需要祖册
4、不能使用非vue3的模块，钩子函数
