编写vue30的示例代码

以下是一个简单的Vue 3.0示例代码，包括组件、数据和方法：

<!-- App.vue -->
<template>
  <div>
    <h1>{{ greeting }}</h1>
    <button @click="incrementCounter">{{ counter }}</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const greeting = ref('Hello, Vue 3!')
    const counter = ref(0)

    function incrementCounter() {
      counter.value++
    }

    return {
      greeting,
      counter,
      incrementCounter
    }
  }
}
</script>

在这个示例中，ref函数是Vue 3.0中用于创建响应式数据的新API。setup函数是Vue 3.0中用于组件配置的新API，它替代了Vue 2.x中的data、computed和methods等选项。在setup函数中，我们使用ref函数创建了两个响应式数据greeting和counter，并且定义了一个incrementCounter方法，用于增加counter的值。最后，我们将这些数据和方法通过return语句导出，让它们可以在模板中使用。