vue3如何使用setup来简化代码

从Vue 3.0.0开始，还提供了一种更加简洁、高效的组件编写语法：<script setup>。使用<script setup> 可以同时定义 props、data、computed、method 等配置，并且不需要在 return 中显式地 return 组件属性。

以下是在Vue 3中使用<script setup>的示例：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  name: String
})

const message = ref('Hello, ' + props.name)

function showMessage() {
  console.log(message.value)
}
</script>

通过<script setup>可以看到：

• 引入响应式API(import { ref } from ‘vue’) 和 定义组件props(defineProps)无需手动引入对应的库.
• 在setup标签内仅需声明相关变量、方法或组件自身属性即可，这些属性将被注入到模板中并成为响应式（Reactive）状态。
• 不必显式地 return 所有组件属性， composition API（组合API）内部会将所有组件属性自动收集并返回响应式结果

使用了<script setup>后，同样可以享受composition API所带来的好处，例如：

• 减少了样板式代码，更容易复用与维护
• 函数化组件 API 更清晰，对IDE友好，可以帮助程序员快速定位错误和修复问题。

请注意，<script setup>不是一个代替选项，您仍然可以在主选项中定义生命周期函数并设置其他属性（例如 $emit），但 <script setup> 使我们能够将组件逻辑集中到一个地方进行更干净的封装和代码管理，缩短学习曲线和找到所需信息的时间，提升开发体验。

使用props

1. 导入defineProps方法以及需要的ref或reactive等响应式API：

   import { defineProps, ref } from 'vue'
   

2. 在setup()函数内部定义props对象，并使用defineProps方法将组件传递进来的属性定义为props的键值对:

   const props = defineProps({
     msg: {
       type: String,
       required: true
     },
     num: Number
   })
   

3. 在模板中通过props对象获取到组件上所有传递进来的属性, 并直接在模板中使用它们：

   <template>
     <div>
       <p>{{ props.msg }}</p>
       <p>{{ props.num }}</p>
     </div>
   </template>
   

其中，在模板中访问props变量时，省略了$符号，而是通过在setup函数中创建一个名为props的对象引用访问它们。

使用emit

1. 在setup()函数内部定义一个名为{ emit }的属性, 它引用自Vue实例。这允许我们在组件中使用 $emit API 来触发事件。

   const { emit } = ctx // 等价于 const emit = ctx.emit
   

2. 在组件中定义我们要触发的事件并携带对应参数：

   function handleClick() {
     emit('myEvent', 'input value')
   }
   

3. 在模板中触发组件的事件：

   <template>
     <div>
       <button @click="handleClick">trigger event</button>
     </div>
   </template>
   

在上述代码示例 emit 为从setup()的第二个参数context上下文对象中解构获得。通过emit方法引用Vue实例来触发一个自定义名称的事件，并可以携带任何参数作为事件数据。

请注意，与Vue 2.x相比，使用setup()和<script setup>包装的组件看似比以前更简洁，但您仍然需要明确使用props、events以及响应式API等特定的Vue生态长列表。所以，在编写 setup 的时候,更好能提前根据需求列出需要的API清单。