8、Vue 3 （2024 版）基础笔记 - 计算属性

计算属性 VS 方法

计算属性可以实现的功能，方法也可以实现，为什么还要使用计算属性？

1. 定义方式不同：计算属性使用 computed 关键字定义，而方法直接使用函数定义。
2. 缓存机制不同：计算属性具有缓存机制，只有当依赖的数据发生变化时，才会重新计算；而方法每次调用都会执行。
3. 返回值类型不同：计算属性可以返回任意类型的值，包括对象、数组等；而方法只能返回一个值。
4. 使用场景不同：计算属性适用于根据已有数据计算出新的数据并展示的场景；而方法适用于处理复杂的逻辑操作，如数据处理、过滤等。

准备工作

1、创建组件

src/components/ComputedDemo.vue

<template></template>

<script setup lang="ts"></script>

2、引入组件

src/App.vue

<template>
    <computed-demo />
</template>

<script setup lang="ts">
    import ComputedDemo from "@/components/ComputedDemo.vue";
</script>

计算属性基本使用

src/components/ComputedDemo.vue

<template>
    {{ hasUsers }}
</template>

<script setup lang="ts">
    // 导入响应式 API：reactive 和 computed
    import {reactive, computed} from 'vue'
    // 响应式数组
    const users = reactive(["王美丽", "王小丽"])

    // 计算属性
    const hasUsers = computed(() => {
        return users.length > 0 ? 'Yes' : 'No'
    })
</script>

可写计算属性

计算属性默认是只读的。当修改一个计算属性时，会收到一个运行时警告。只在某些特殊场景中才需要用到“可写”的属性，可以通过同时提供 getter 和 setter 来创建：

src/components/ComputedDemo.vue

<template>
    {{ fullName }}
</template>

<script setup lang="ts">
    // 导入响应式 API：ref 和 computed
    import {ref, computed} from 'vue'

    const firstName = ref('美美')
    const lastName = ref('丽丽')

    const fullName = computed({
        get () {
          return firstName.value + ' ' + lastName.value
        },
        set (newValue) {
            firstName.value = newValue + "王"
            lastName.value = newValue + '赵'
        }
    })

    fullName.value = "美美 丽丽"
</script>

浏览器结果：

美美 丽丽王 美美 丽丽赵