Compute 计算属性

Computed定义

当我们有时候需要将模版中的某一个数据进行一系列处理后从而得到一个新的值，虽然 Vue 的模版中能够支持我们写一些表达式但是这样会使得我们的模板变得臃肿且不够灵活定制化，所以 Vue 也并不推荐我们在模板中写太多的表达式。因此 Vue 推荐我们使用计算属性（computed）来描述依赖响应式状态的复杂逻辑。

当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值。

使用

首先要导入 computed

html 复制代码

import { computed, ref } from 'vue';

html 复制代码

<script lang="ts" setup name="FullName">
import { computed, ref } from 'vue';

    let firstName = ref('zhang')
    let lastName = ref('san')
    let fullName = computed({
        get(){
            return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
        },
        set(value: string) {
            let arr = value.split('-')
            firstName.value = arr[0]
            lastName.value = arr[1]
        }
    })

    function changeName() {
        fullName.value = 'li-si'
    }
</script>

<template>
    <div class="FullName">
        <input type="text" v-model="firstName" />
        <br />
        <input type="text" v-model="lastName" />
        <br />
        <button @click="changeName">修改名字</button>
        <br />
        <span> {{ fullName }} </span>
    </div>
</template>

<style scoped>
    input {
        margin-bottom: 20px;
        width: 200px;
        height: 30px;
    }   

   .FullName {
        text-align: center;
        margin-top: 50px;
    }
</style>

计算属性缓存

一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 firstName 和 lastName 不改变，无论多少次访问 fullName 都会立即返回先前的计算结果，而不用重复执行 getter 函数。

相比之下，方法调用总是会在重渲染发生时再次执行函数。

为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。没有缓存的话，我们会重复执行非常多次 list 的 getter，然而这实际上没有必要！如果你确定不需要缓存，那么也可以使用方法调用。

html 复制代码

<script lang="ts" setup name="FullName">
import { computed, ref } from 'vue';

    let firstName = ref('zhang')
    let lastName = ref('san')
    let fullName = computed(() => {
            console.log('计算属性')
            return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    })

    function changeName2() {
        console.log('方法')
        return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    }
</script>

<template>
    <div class="FullName">
        <input type="text" v-model="firstName" />
        <br />
        <input type="text" v-model="lastName" />
        <br />
        <span> {{ fullName }} </span><br />
        <span> {{ fullName }} </span><br />
        <span> {{ fullName }} </span><br />
        <span> {{ fullName }} </span><br />
        <span> {{ changeName2() }} </span><br />
        <span> {{ changeName2() }} </span><br />
        <span> {{ changeName2() }} </span><br />
        <span> {{ changeName2() }} </span>

    </div>
</template>

<style scoped>
    input {
        margin-bottom: 20px;
        width: 200px;
        height: 30px;
    }   

   .FullName {
        text-align: center;
        margin-top: 50px;
    }
</style>

可以看到控制台只输出了一次"计算属性",但是却输出了四次"方法"