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的模块，钩子函数