vue3的写法

Vue3相比于Vue2，在语法和使用上有很多变化，下面是一个简单的Vue3示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">+1</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue3!',
      counter: 0
    })

    const incrementCounter = () => {
      state.counter += 1
    }

    return {
      message: state.message,
      incrementCounter
    }
  }
}
</script>

在Vue3中，我们使用了`setup()`函数来替代Vue2中的`data`和`methods`选项。`setup()`函数返回一个对象，这个对象包含了组件中需要用到的数据和方法。在这个例子中，我们使用`reactive()`来创建一个响应式的数据对象`state`，并将`message`和`incrementCounter`方法暴露出去。

在模板中，我们可以像Vue2一样使用双括号语法来渲染数据，使用`@`符号来绑定事件。