无状态和无实例 Demo

作者：Odboy (opens new window)

本站地址：https://blog.odboy.cn (opens new window)

文件后缀

*.vue

使用 ref 创建数字变量

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

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

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

<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 创建对象变量

<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。这样可以直接在模板中解构对象的属性，同时保持响应性。

<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>