Vue 3.0 示例代码：组件、数据和方法

以下是使用 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' 语句导出，让它们可以在模板中使用。