vue3+ ts 实现数据的修改

在 Vue 3 中使用 TypeScript 实现数据的修改与 Vue 2 类似，但有一些语法上的差异。下面是一个简单的示例：

首先，定义一个 Vue 组件：

<template>
  <div>
    <button @click="increment">增加</button>
    <p>计数: {{ count }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Counter',
  setup() {
    // 使用 ref() 创建响应式数据
    const count = ref(0);

    // 定义一个方法来修改数据
    const increment = () => {
      count.value += 1;
    };

    return {
      count,
      increment,
    };
  },
});
</script>

在上面的示例中，我们使用 `ref()` 函数来创建一个响应式的数据 `count`，并通过 `count.value` 来访问和修改它。

在 `<button>` 元素上使用 `@click` 监听点击事件，触发 `increment` 方法来增加计数。

最后，在 `<p>` 元素中使用双花括号 `{{ count }}` 来展示计数的值。

这样，当点击按钮时，`count` 的值会自动更新，并且视图也会相应地更新。

希望这个示例对你有帮助！如果还有其他问题，请随时提问。