返回 导航

Vue.js

hangge.com

Vue.js 3 - Composition API使用详解5（computed函数、计算属性）

作者：hangge | 2026-04-29 08:59
    在 Options API 中，我们可以使用 computed 选项编写计算属性。 而在 Composition API 中，我们可以在 setup 函数中使用 computed 函数编写计算属性。 下面我将通过样例来演示 computed 函数的两种使用方式。 

五、computed 函数

1，基本用法

（1）computed 函数最基本用法是：computed 函数接收一个 getter 函数，并根据 getter 函数的返回值返回一个不可变的响应式 ref 对象。下面是具体的样例代码：
  • 使用 computed 函数定义了一个 fullName 计算属性。该函数需要接收一个 getter 函数，在 getter 函数中对响应式数据进行计算，并返回计算结果。
  • 当单击“修改 lastName” 按钮时，会修改 firstName，进而触发计算属性重新进行计算。 
<template>
    <div>
        <!-- 使用fullName计算属性 -->
        <h4>{{ fullName }}</h4>
        <button @click="changeName">修改lastName</button>
    </div>
</template>

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

export default {
    setup() {
        const firstName = ref("hello");
        const lastName = ref("world");

        // 传入一个getter函数
        // computed的返回值是一个ref对象
        const fullName = computed(() => firstName.value + " " + lastName.value);

        // 修改firstName 计算属性会重新计算
        const changeName = () => {
            lastName.value = "hangge"
        }

        return {
            fullName,
            changeName
        }
    }
}
</script>

（2）运行后可以看到，计算属性可以正常显示，当单击“修改 lastName”按钮时，页面会响应式刷新。

2，computed 函数的 get 和 set 方法

（1）computed 函数也可以接收一个具有 get 和 set 方法的对象，比如下面样例我们使用 computed 函数定义了一个 fullName 计算属性，该函数接收一个具有 get 和 set 方法的对象。
  • 在 get 方法中，我们对响应式数据进行计算并返回。
  • 在 set 方法中，我们将传入的新值重新赋给 firstName 和 lastName 响应式对象中的值。当单击“修改 lastName” 按钮时，会触发 fullName 计算属性的 set 方法，该方法可接收传入的新值。 
<template>
    <div>
        <!-- 使用fullName计算属性 -->
        <h4>{{ fullName }}</h4>
        <button @click="changeName">修改Name</button>
    </div>
</template>

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

export default {
    setup() {
        const firstName = ref("hello");
        const lastName = ref("world");

        // 传入一个对象, 对象包含getter/setter
        const fullName = computed({
            get: () => firstName.value + " " + lastName.value,
            set(newValue) { // setter
                const names = newValue.split(" ");
                firstName.value = names[0];
                lastName.value = names[1];
            }
        });

        const changeName = () => {
            fullName.value = "hi hangge";
        }

        return {
            fullName,
            changeName
        }
    }
}
</script>

（2）运行后可以看到，计算属性可以正常显示，当单击“修改 Name”按钮时，页面会响应式刷新。
评论

全部评论（0）

回到顶部