在 Vue3 中，如何使用 setup 函数创建响应式数据？

在 Vue3 中，使用setup函数创建响应式数据主要有以下几种方式：

1. 使用ref函数：ref函数用于创建一个响应式的数据引用。通过ref创建的变量，在模板中使用时需要通过.value来访问其值。

import {
    ref } from 'vue';

const count = ref(0);

1. 使用reactive函数：reactive函数可以创建一个包含多个属性的响应式对象。它直接返回一个响应式对象，在模板中可以直接访问对象的属性。

import {
    reactive } from 'vue';

const person = reactive({
   
  name: '张三',
  age: 20
});

1. 使用computed函数：computed函数用于创建一个计算属性，它会根据依赖的响应式数据自动计算并返回结果。计算属性的值也是响应式的。

import {
    computed } from 'vue';

const doubleCount = computed(() => count.value * 2);

1. 使用watch函数：watch函数用于监听响应式数据的变化，并在数据变化时执行相应的回调函数。可以监听单个变量或一个对象的多个属性。

   watch(count, (newValue, oldValue) => {
        
   // 处理数据变化
   });
   

这些方法都可以帮助我们在setup函数中创建响应式数据，使组件能够根据数据的变化自动更新视图。

需要注意的是，在使用ref和reactive创建响应式数据时，要避免直接修改响应式对象的属性值，而应该通过相应的方法来进行修改，以确保数据的响应性能够正确维护。

此外，在实际开发中，我们可以根据具体的需求选择合适的方式来创建响应式数据，以提高代码的可读性和维护性。