背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中计算属性的用法。

计算属性是根据其他数据的变化自动计算其关联的衍生值，且具备缓存机制，即只有依赖的数据发生变化时才会重新计算。

开发环境

开发步骤及源码

1> 在 【Vue3】响应式数据 基础上修改 Vue 根组件 App.vue 代码，使用 只读 的计算属性。

<!-- 组件结构 -->
<template>
    <div class="person">
        <h3>姓名：{{ name }}</h3>
        <h3>生日：{{ birthDisplay }}</h3>
        <button @click="showContact">查看联系方式</button>
        <button @click="changeName">修改名字</button>
    </div>
</template>

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

// 数据定义
let name = ref('哈利·波特')
let birth = new Date('1980-07-31')
let contact = '霍格沃茨魔法学校格兰芬多学院'

let birthDisplay = computed(() => {
    return birth.getFullYear() + '-' + (birth.getMonth() + 1) + "-" + birth.getDate()
})

// 方法定义
function showContact() {
    alert(contact)
}

function changeName() {
    name.value = 'Harry Potter'
}
</script>

<!-- 组件样式 -->
<style lang="scss">
.person {
    background-color: cadetblue;
    border-radius: 5px;
    color: white;
    padding: 20px;
    
    button {
        background-color: gold;
        border-radius: 5px;
        padding: 5px 10px;
        margin-right: 10px;
    }
}
</style>

2> 添加函数实现计算属性功能，观察两者间的区别。

<!-- 组件结构 -->
<template>
    <div class="person">
        <h3>姓名：{{ name }}</h3>
        <h3>生日（计算属性）：{{ birthDisplay }}</h3>
        <h3>生日（计算属性）：{{ birthDisplay }}</h3>
        <h3>生日（计算属性）：{{ birthDisplay }}</h3>
        <h3>生日（函数）：{{ displayBirth() }}</h3>
        <h3>生日（函数）：{{ displayBirth() }}</h3>
        <h3>生日（函数）：{{ displayBirth() }}</h3>
        <button @click="showContact">查看联系方式</button>
        <button @click="changeName">修改名字</button>
    </div>
</template>

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

// 数据定义
let name = ref('哈利·波特')
let birth = new Date('1980-07-31')
let contact = '霍格沃茨魔法学校格兰芬多学院'

let birthDisplay = computed(() => {
    console.log('执行计算属性')
    return birth.getFullYear() + '-' + (birth.getMonth() + 1) + "-" + birth.getDate()
})

function displayBirth() {
    console.log('执行函数')
    return birth.getFullYear() + '-' + (birth.getMonth() + 1) + "-" + birth.getDate()
}

// 方法定义
function showContact() {
    alert(contact)
}

function changeName() {
    name.value = 'Harry Potter'
}
</script>

<!-- 组件样式 -->
<style lang="scss">
.person {
    background-color: cadetblue;
    border-radius: 5px;
    color: white;
    padding: 20px;
    
    button {
        background-color: gold;
        border-radius: 5px;
        padding: 5px 10px;
        margin-right: 10px;
    }
}
</style>

页面中对计算属性和函数各使用了 3 次，但通过观察日志可以看出，计算属性实际只执行了 1 次，但函数执行了 3 次，因此证明计算属性是带缓存机制的。