一、什么是computed

computed属性是Vue3中的一个响应式计算属性，它可以根据其他响应式数据的变化而自动更新其自身的值。computed属性可以接收一个计算函数，并在计算函数中使用其他响应式数据的值进行计算。当任何一个参与计算的响应式数据发生变化时，computed属性会自动重新计算其值，并触发相应的依赖更新。

二、在vue3中使用computed

假设一个场景，我有两个input框，一个填写姓，一个填写名，我希望我的全名是姓和名之间加个分割符号，代码如下：

<template>
 <div>
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名 <span>{{ firstName + '-' + lastName }}</span> <br>
 </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let firstName = ref('王')
let lastName = ref('五')

</script>

4691704965833_.pic.jpg

现在我不希望我的template模版中有任何拼接字符串操作，我希望computed帮我做这件事情，那么就变成：

<template>
 <div>
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名 <span>{{ fullName }}</span> <br>
 </div>
</template>

<script setup lang="ts">

//在vue中引入computed
import { ref, computed } from 'vue'

let firstName = ref('王')
let lastName = ref('五')

// 定义一个变量用来接收全名，计算全名并返回
let fullName = computed(() => {
    return firstName.value + '-' + lastName.value
})

</script>

但是这个fullName是只读的，不可以修改，如果我们这时候有个需求，一个按钮把全名为王五的改为Yami，并且两个输入框也要相应的变化，那么我们就需要写为可读可写的形式，代码如下：

<template>
 <div>
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名 <span>{{ fullName }}</span> <br>
    <button @click="changeFullName()">修改全名</button>
 </div>
</template>

<script setup lang="ts">

//在vue中引入computed
import { ref, computed } from 'vue'

let firstName = ref('王')
let lastName = ref('五')

// 定义一个变量用来接收全名，计算全名并返回
let fullName = computed({
    //这里面是计算
    get() {
        return firstName.value + '-' + lastName.value
    },
    //当按钮触发后，set方法自动触发，此时val参数就是Ya-mi
    set(val) {
        const [str1, str2] = val.split('-')
        firstName.value = str1
        lastName.value = str2
    }
})
//修改全名的按钮
function changeFullName() {
    fullName.value = "Ya-mi"
}

</script>

总结

computed属性是Vue3中的一个响应式计算属性，它可以根据其他响应式数据的变化而自动更新其自身的值。computed属性通常用于处理需要根据其他响应式数据计算得出的值的情况，例如过滤和排序、数组计算等。computed属性的原理是使用了一个getter函数和一个setter函数来实现，并将计算结果缓存起来，以提高性能和减少计算次数。

在vue3中使用computed计算属性（详细）

一、什么是computed

二、在vue3中使用computed

总结