Vue3 computed()的用法（附带实例）

Vue3 组合式 API 中的 computed() 函数与选项式 API 中的 computed 属性的功能是一样的，只是在语法的使用上不同而已，但不管是在组合式 API 还是在选项式 API 中，都是既可以只指定 getter，也可以指定 getter（指 get 方法）和 setter（指 set 方法）的。

computed() 函数接收的参数可以是一个函数，也可以是一个包含 get 方法和 set 方法的对象。当参数为函数时，就是指定了 getter，用来返回动态计算的结果值；当参数为对象时，就是指定了 getter 和 setter，此时既可以通过 getter 返回动态计算的结果值，也可以通过 setter 监听计算属性的修改。

computed() 函数的返回值是计算属性对象，它本质上是一个 ref 对象，getter 返回的值会被自动保存到其 value 属性上。当我们修改计算属性对象的 value 属性值时，setter 就会被自动调用。

下面通过代码演示 computed() 函数的使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>computed() 函数</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>测试只带 get 方法的计算属性</h3>
        <p>数量：{{ count }}</p>
        <p>姓名：{{ person.name }}</p>
        <p>信息（get 方法计算属性）：{{ info }}</p>
        <button @click="update">更新</button>

        <h3>测试带 get 和 set 方法的计算属性</h3>
        <input type="text" v-model="doubleCount" />
    </div>
    <script>
        const { createApp, ref, reactive, computed } = Vue;

        createApp({
            setup() {
                // 定义 ref 对象
                const count = ref(0);
                // 定义 reactive 对象
                const person = reactive({
                    name: '张三',
                });

                // 定义只有 getter 的计算属性
                const info = computed(() => {
                    return `${person.name}完成的数量${count.value}`;
                });

                // 定义有 getter 和 setter 的计算属性
                const doubleCount = computed({
                    get() {
                        console.log(info);
                        return count.value * 2;
                    },
                    set(value) {
                        count.value = value / 2;
                    },
                });

                // 更新 ref 或 reactive 数据
                const update = () => {
                    count.value += 1;
                    person.name += '---';
                };

                return {
                    count,
                    person,
                    info,
                    update,
                    doubleCount,
                };
            },
        }).mount('#app');
    </script>
</body>
</html>

代码运行后的页面效果如下图所示：

图 1 代码运行后的页面效果

在上面的代码中，我们先分别定义了一个 ref 对象 count 和一个 reactive 对象 person，然后调用 computed() 函数来定义计算属性 info，传入的参数为用于动态计算属性值的 get() 函数。

computed() 函数返回的 info 对象，本质上是一个 ref 对象，可以通过控制台进行查看，如下图所示：

图 2 通过控制台查看info对象

根据控制台输出的结果可以看出，内部“_value”的值就是执行 get() 函数，在读取前面的 ref 和 reactive 响应式数据后，计算并返回的结果。同时返回了计算属性对象，在模板中就可以读取计算属性显示。

当点击“更新”按钮时，我们在点击回调中更新了计算属性依赖的 ref 数据和 reactive 数据，info 计算属性的 get() 函数会自动执行，并将返回的结果值更新到页面上。

当然如果模板中有多处读取计算属性，则计算属性的 get() 函数只会执行一次，因为计算属性有缓存，这是与选项式 API 一样的特点。

接着定义了带 get() 和 set() 方法的计算属性 doubleCount，在 get() 方法中返回前面 count 对象的两倍值，在 set() 方法中将最新值的一半更新给了 count 对象。在返回 doubleCount 计算属性的同时，在模板中利用 v-model 指令对 doubleCount 计算属性进行双向数据保存处理。

在初始显示时，程序会自动执行 doubleCount 计算属性的 get() 方法，根据初始 count 值进行计算，返回 0 并显示到输入框中。当用户点击“更新”按钮更新 count 值时，doubleCount 计算属性的 get() 方法会被自动调用，返回新计算结果并显示到输入框中；当用户在输入框中改变输入内容时，v-model 指令会将输入的最新值赋给 doubleCount 计算属性，这自然会触发 set() 方法执行。随后在 set() 方法中更新了 count 值，这样页面上的数量和计算属性信息都会更新显示。

Vue3 computed()的用法（附带实例）

相关文章