vue3定义变量

// 在 Vue 3 中定义变量可以通过 setup 函数或者使用 ref 和 reactive 来实现

// 使用 ref 定义一个基本类型的变量
import { ref } from 'vue';

export default {
  setup() {
    // 定义一个名为 count 的变量，初始值为 0
    const count = ref(0);

    // 返回该变量以便在模板中使用
    return {
      count
    };
  }
};

// 使用 reactive 定义一个对象类型的变量
import { reactive } from 'vue';

export default {
  setup() {
    // 定义一个名为 state 的对象，包含多个属性
    const state = reactive({
      name: 'Vue 3',
      version: 3.0
    });

    // 返回该对象以便在模板中使用
    return {
      state
    };
  }
};

解释说明：

1. ref：用于定义基本类型（如数字、字符串、布尔值等）的响应式变量。ref 返回的是一个带有 .value 属性的对象，但在模板中可以直接使用变量名而不需要加 .value。

2. reactive：用于定义对象类型的响应式变量。reactive 接受一个普通对象并返回一个响应式的代理对象。所有嵌套的属性都会自动变为响应式的。

3. setup 函数：这是 Composition API 的入口函数，在这里可以定义和返回组件的状态和逻辑。返回的对象中的属性可以在模板中直接使用。