vue3 如何通过函数改变data()中的值

您好！感谢您使用 ChitGPT 进行对话！

回答您的问题：在 Vue3 中，可以通过 `ref` 创建响应式数据，并且可以通过 `value` 属性访问和修改该数据。

举例来说，假设您有以下组件代码：

<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">Update</button>
</template>

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

export default {
  setup() {
    const message = ref('Hello, World!');

    function updateMessage() {
      message.value = 'Hello, Vue3!';
    }

    return {
      message,
      updateMessage,
    }
  }
}
</script>

您可以看到，在 `setup()` 函数中，我们使用 `ref` 创建了一个名为 `message` 的响应式数据，并在 `template` 中渲染了该数据。我们还编写了一个名为 `updateMessage` 的函数，该函数将 `message` 的值更改为 `'Hello, Vue3!'`。

然后，在 `template` 中，我们将 `updateMessage` 作为按钮的 `click` 事件处理程序。

当您单击按钮时，将调用 `updateMessage` 函数，该函数将更改 `message.value` 的值。由于 `message` 是响应式的，因此界面上消息的值也将更改为 `'Hello, Vue3!'`。

希望这回答了您的问题，如果您还有其他问题，请随时问我！