vue3 定义变量

// 在 Vue 3 中定义变量的方式主要有两种：在 setup 函数中使用 ref 或 reactive 定义响应式变量，或在 <script setup> 语法中直接定义。

// 1. 使用 setup 函数和 ref 定义单个响应式变量
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    // 定义一个响应式的 count 变量
    const count = ref(0);

    // 定义一个方法来修改 count 的值
    const increment = () => {
      count.value++;
    };

    // 返回定义的变量和方法，使其可以在模板中使用
    return {
      count,
      increment
    };
  }
};
</script>

// 2. 使用 <script setup> 语法（Vue 3 新特性）
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

// 定义一个响应式的 message 变量
const message = ref('Hello, Vue 3!');

// 定义一个方法来修改 message 的值
const changeMessage = () => {
  message.value = 'Message changed!';
};
</script>

解释说明：

• ref：用于创建一个响应式的引用对象。你可以通过 .value 来访问和修改它的值。
• setup：Vue 3 中的一个函数，在组件创建时执行。它返回的对象中的属性和方法可以在模板中使用。