vue3 const

// Vue 3 示例代码，使用 const 定义响应式数据

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用 const 定义一个响应式变量
    const message = ref('Hello Vue 3');

    // 定义一个方法来更新 message 的值
    const updateMessage = () => {
      message.value = 'Vue 3 is awesome!';
    };

    // 返回需要在模板中使用的变量和方法
    return {
      message,
      updateMessage
    };
  }
};
</script>

<style scoped>
/* 样式部分可以根据需要添加 */
</style>

解释说明：

1. const 关键字：在 Vue 3 的 setup 函数中，我们使用 const 来定义响应式变量 message 和方法 updateMessage。const 表示这些变量的引用是不可变的，但它们的值可以变化（例如 message.value）。

2. ref 函数：ref 是 Vue 3 提供的一个函数，用于创建一个响应式的引用对象。它允许我们在组件中声明一个可变的状态，并且可以在模板中直接访问这个状态。

3. setup 函数：这是 Vue 3 组合式 API 的入口函数，所有的逻辑都可以在这个函数中编写。通过 return 返回的对象中的属性和方法可以在模板中直接使用。

4. @click 事件：当点击按钮时，会触发 updateMessage 方法，更新 message 的值，页面也会相应地重新渲染。