Vue3中 setup 语法糖写法

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引入；

// 父组件

// 子组件