Vue3中 setup 语法糖写法
Composition API及组合式API,是根据逻辑相关性组织代码的，提高可读性和维护性。最大的优点在V3中写hooks了，重复性使用相同代码的逻辑。 但是也有相应的缺点：
- 组件引入之后需要注册
- 属性和方法必须写在setup中，并且需要一个个的返回
所以Vue官方给了一个非常完美的解决方式：
// setup 语法糖
<script lang="ts" setup name="Item">
import { ref } from "vue";
let Num = ref(0);
</script>
在script标签中直接写上 setup,并且直接在script中写上name相当于Vue2中的export default { name: "Item"};。所以在vue3中这样引用写个语法糖，
-
1.直接引入组件，且不需要注册；
-
2.属性和方法也不需要返回；
-
3.也不需要写
export default； -
4.
import { useContext, defineProps, defineEmits } from 'vue'所有Vue相关的Api直接通过vue引入；
// 父组件
<template>
<Person/>
</template>
<script lang="ts" setup name="App">
import Person from './components/Person.vue'
</script>
// 子组件
<template>
<div class="person">
<h2>{{ sum }}</h2>
</div>
</template>
<script lang="ts" setup name="Person">
import { ref } from 'vue'
let sum = ref(0)
</script>
