写个简单的vue3案例

这是一个简单的Vue3案例，实现了一个简单的计数器：

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

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

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

    const decrement = () => {
      state.count--
    }

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

这个案例使用了Vue3的新特性：reactive函数。通过reactive函数，我们可以创建响应式对象。当响应式对象的属性被修改时，相关的组件会自动更新。

在setup函数中，我们创建了一个响应式对象state，它有一个属性count，初始值为0。我们还定义了两个方法increment和decrement，分别用于增加和减少count的值。

最后，我们使用return语句返回了三个变量：count、increment和decrement，它们会被模板中的表达式和事件绑定使用。