Vue3 引入组合式 API（Composition API）和 <script setup> 语法糖，大幅简化组件开发体验。本文通过三个完整 Demo 展示 Vue3 函数式组件（也称无状态/无实例组件）的核心用法。内容包括：ref 创建基础类型响应式变量（如数字计数器），强调 .value 在 JavaScript 中访问/修改值的必要性，以及模板中自动解包无需 .value；reactive 创建对象类型响应式变量，直接修改属性即可触发更新；ref 与 reactive 混合使用时结合 toRefs 解构，保持响应性并支持模板直接访问属性。文件后缀使用 .vue。

本文适用于从 Vue2 迁移或新上手 Vue3 组合式 API 的开发者。

文件后缀

shell
*.vue

使用 ref 创建数字变量

text
.value 是 ref 对象的一个属性，用于访问或修改其存储的值

# 需要 .value 的情况
- 记住在JavaScript中操作 ref 时需要 .value

# 不需要 .value 的情况
- 在 Vue 的 <template> 模板中，ref 会被自动解包为其值
- 如果 ref 绑定到 v-model，Vue 会自动处理 .value

html

<template>
    <div>
        <!-- <p>数字: {{ number.value }}</p> -->
        <p>数字: {{ number }}</p>
        <button @click="increment">增加</button>
    </div>
</template>

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

    // 创建一个响应式的数字变量
    const number = ref(0);

    // 定义一个方法来增加数字的值
    function increment() {
        number.value++;
    }
</script>

使用 reactive 创建对象变量

html

<template>
    <div>
        <p>姓名: {{ user.name }}</p>
        <p>年龄: {{ user.age }}</p>
        <button @click="updateUser">更新用户信息</button>
    </div>
</template>

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

    // 创建一个响应式的对象变量
    const user = reactive({
        name: '张三',
        age: 30,
    });

    // 定义一个方法来更新对象的内容
    function updateUser() {
        user.name = '李四';
        user.age = 31;
    }
</script>

使用 ref 和 reactive 混合使用

如果你需要在模板中直接访问对象的属性，但又想保留对象的响应性，可以使用toRefs。这样可以直接在模板中解构对象的属性，同时保持响应性。

html

<template>
    <div>
        <p>姓名: {{ user.name }}</p> <!-- 这里可以直接访问 user.name -->
        <p>年龄: {{ user.age }}</p> <!-- 这里也可以直接访问 user.age -->
        <button @click="updateUser">更新用户信息</button>
    </div>
</template>

<script setup>
    import {reactive, toRefs} from 'vue';

    // 创建一个响应式的对象变量并使用 toRefs 解构为 refs，以便在模板中直接访问属性且保持响应性。
    const user = reactive({
        name: '张三',
        age: 30,
    });
    const {name, age} = toRefs(user); // 注意这里不需要在模板中用 user.name，而是可以直接用 name 和 age。但为了演示，我们还是保留了 user.name 的使用方式。实际开发中，可以直接在模板中使用 name 和 age。

    // 定义一个方法来更新对象的内容（这里只是为了演示，实际开发中可以直接修改 user.name 和 user.age）
    function updateUser() {
        user.name = '李四'; // 或者直接修改 name.value = '李四'; 但为了演示，我们还是保留了直接修改对象属性的方式。实际开发中，可以直接修改 user.name。
        user.age = 31; // 或者直接修改 age.value = 31; 但为了演示，我们还是保留了直接修改对象属性的方式。实际开发中，可以直接修改 user.age。
    }
</script>