Vue3 页面示例：计数器组件代码详解

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>计数器：{{ count }}</p>
    <button @click='increment'>增加</button>
  </div>
</template>
<script>
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const state = reactive({
      message: 'Hello Vue3!',
      count: 0
    })

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

    return {
      message: state.message,
      count: state.count,
      increment
    }
  }
})
</script>
<p>在这个例子中，我们使用了 <code>defineComponent</code> 和 <code>reactive</code> 函数来定义一个组件和响应式数据。<code>state</code> 对象中的 <code>message</code> 和 <code>count</code> 属性都是响应式的，因此当它们发生变化时，页面会自动更新。<code>increment</code> 函数可以增加计数器的值。最后，我们在 <code>setup</code> 函数中返回了需要暴露给外部使用的变量和函数。</p>