核心内容

这里很重要

Vue
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
姓<input type="text" v-model="firstName"></input>
名<input type="text" v-model="lastName"></input>
<h2>全名:{{ fullName }}</h2>
<button @click="changeName">一键改名</button>
</template>
<script setup lang="ts">
import {ref,reactive,computed} from 'vue'

let firstName = ref('zhang')
let lastName = ref('san')


// 这里computed有缓存，多次只调用一次get函数
let fullName = computed({
    get(){
    console.log(1,'调用get函数')
    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + lastName.value
    },
    set(val){
         console.log(2,'调用set函数')   
         [str1,str2] = val.split(' ')
         firstName.value = str1
         lastName.value = str2
    }
})

function changeName(){
    fullName.value = 'li si'
}

</script>

函数=> 没有缓存，每一次都会重新调用 computed函数 => 存在缓存，可以缓存上一次计算的结果