vue3 写法

// Vue 3 示例代码

<template>
  <div id="app">
    <!-- 使用 v-bind 绑定动态属性 -->
    <h1>{{ message }}</h1>
    <!-- 使用 v-on 绑定事件处理函数 -->
    <button @click="increment">点击我</button>
    <p>计数: {{ count }}</p>
  </div>
</template>

<script>
import { ref, reactive, computed, watch, onMounted } from 'vue';

export default {
  name: 'App',
  setup() {
    // 响应式数据
    const message = ref('Hello Vue 3!');
    const count = ref(0);

    // 方法
    const increment = () => {
      count.value++;
    };

    // 计算属性
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });

    // 监听器
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    // 生命周期钩子
    onMounted(() => {
      console.log('组件已挂载');
    });

    // 返回要暴露的对象
    return {
      message,
      count,
      increment,
      reversedMessage
    };
  }
};
</script>

<style scoped>
/* 样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 v-bind 和 v-on 指令来绑定属性和事件。
   • 动态显示 message 和 count 的值。

2. 脚本部分 (<script>):

   • 导入了 Vue 3 的组合式 API 函数如 ref, reactive, computed, watch, onMounted。
   • 使用 setup 函数作为组件的入口，返回需要暴露给模板的数据和方法。
   • ref 用于创建响应式的基本类型变量（如 message 和 count）。
   • computed 用于定义计算属性（如 reversedMessage）。
   • watch 用于监听 count 的变化并执行相应逻辑。
   • onMounted 用于在组件挂载后执行一些初始化操作。

3. 样式部分 (<style scoped>):

   • 定义了组件内部使用的样式，并且使用 scoped 属性确保样式只作用于当前组件。