vue3 setup语法糖

### 回答1：
Vue 3 中新增了一种叫做 "setup" 的语法糖。它是一个全新的组件选项，可以用来替代之前版本中的 data、computed、watch 等选项。使用 setup 函数，可以让组件选项变得更简洁、更灵活。

示例：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() {
      count.value++
    }
    return {
      count,
      increment
    }
  }
}
</script>

setup 函数返回一个对象，对象中的属性将会被作为该组件实例的属性，而方法将会作为该组件实例的方法

使用 setup，可以更方便的处理数据、计算属性和观察者等。

### 回答2：
Vue3中的setup函数是一种新的语法糖，用于替代Vue2中的created、mounted等生命周期钩子函数的使用。它是在组件实例化之前执行的一个函数，可以用来初始化组件的状态、设置监听、处理副作用等操作。

在Vue3中，我们可以通过导出一个函数，将组件的数据、方法等以对象的形式传递给setup函数。在setup函数内部，我们可以使用Vue提供的一些响应式API（如reactive、ref等）来创建响应式的数据、引用其他组件、订阅和触发事件等。

相较于Vue2中使用不同的生命周期钩子函数分散地定义各种逻辑，使用setup函数可以将组件的逻辑集中在一个函数内部，提高了代码的可读性和维护性。同时，由于setup函数是在组件实例化之前执行的，它与组件实例完全解耦，可以更方便地进行单元测试和复用。

在setup函数内部，我们使用return语句来返回需要在模板中使用的数据和方法。返回的数据将会被注入到组件的模板中，我们可以直接在模板中使用这些数据。在Vue3中，我们不再使用this关键字去访问数据，而是直接使用导入的数据。

总结来说，Vue3的setup语法糖通过一个函数将组件的数据、方法等传递给setup函数，使得组件的逻辑集中在一个函数内部，提高了代码的可读性和维护性。它与组件实例完全解耦，方便进行单元测试和复用。同时，使用响应式API让数据的变化可以自动更新视图。