vue3中seetup语法糖如何使用setData

在Vue3中，使用`setup`语法糖来进行组件的编写。`setup`函数接收两个参数：`props`和`context`。其中，`props`是接收到的属性，`context`是组件上下文对象，包含了一些方法和属性。在`setup`函数中，我们可以直接使用原生的JavaScript来编写逻辑。

与Vue2中的`setData`不同，在Vue3中，我们可以使用`ref`和`reactive`来进行响应式数据的定义和使用。`ref`用于定义单一数据的响应式，`reactive`用于定义对象或数组的响应式。在Vue3中，我们不需要使用`setData`来更新数据，直接修改响应式数据的值即可自动更新视图。

以下是一个使用`setup`函数和`reactive`定义响应式数据的例子：

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

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      counter: 0
    })

    const increment = () => {
      state.counter++
    }

    return {
      counter: state.counter,
      increment
    }
  }
}
</script>

在上面的例子中，我们使用`reactive`定义了一个名为`state`的响应式对象，并在`increment`函数中修改了`state.counter`的值。在`setup`函数的最后，我们将`counter`和`increment`返回，供模板中使用。这样，每次点击按钮时，`counter`的值都会自动更新，并重新渲染视图。