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

// 父组件
<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>