computed 是一種用于聲明計算屬性的 API犬第。計算屬性是一種根據(jù)其他數(shù)據(jù)的變化而動態(tài)計算得到的屬性型宙，它們的值會被緩存疮茄，只有在相關(guān)依賴發(fā)生變化時才會重新計算擎浴。
import { ref, computed } from 'vue';
const data = ref(5);
// 創(chuàng)建一個計算屬性
const squared = computed(() => {
return data.value * data.value;
});
console.log(squared.value); // 輸出 25
// 當(dāng) data 的值變化時员咽，squared 會自動更新
data.value = 6;
console.log(squared.value); // 輸出 36
在上面的例子中，squared 是一個計算屬性贮预，它依賴于 data 的值贝室。計算屬性的定義是一個函數(shù)，該函數(shù)返回計算的結(jié)果仿吞。在模板或其他計算屬性中滑频，你可以通過訪問 squared.value 來獲取計算屬性的值。
計算屬性的依賴：
Vue 3 會追蹤計算屬性的依賴關(guān)系唤冈，當(dāng)依賴的數(shù)據(jù)發(fā)生變化時峡迷，計算屬性會被重新計算。在上面的例子中，squared 依賴于 data绘搞，所以當(dāng) data 變化時彤避，squared 會重新計算。
計算屬性的 Setter：
你還可以為計算屬性提供一個 setter 函數(shù)夯辖，用于處理對計算屬性的賦值操作琉预。
import { ref, computed } from 'vue';
const data = ref(5);
// 創(chuàng)建一個計算屬性
const squared = computed({
get: () => data.value * data.value,
set: (value) => {
// 在這里處理對計算屬性的賦值操作
data.value = Math.sqrt(value);
}
});
console.log(squared.value); // 輸出 25
// 賦值操作會調(diào)用 setter
squared.value = 36;
console.log(data.value); // 輸出 6
在上面的例子中，當(dāng)對 squared 進(jìn)行賦值操作時蒿褂，會調(diào)用 set 函數(shù)圆米，然后更新 data 的值。這種方式允許你在計算屬性被修改時執(zhí)行一些額外的邏輯啄栓。
總體來說娄帖，computed 計算屬性是 Vue 中一種非常強大且方便的特性，使你能夠以聲明式的方式定義派生狀態(tài)谴供。
<template>
<div class="person">
姓：<input type="text" v-model="firstName" /><br />
名：<input type="text" v-model="lastName" /><br />
全名：<span>{{ fullName }}</span> <br />
<!-- {{ fullName2() }}
{{ fullName2() }}
{{ fullName2() }}
{{ fullName2() }}
{{ fullName2() }} -->
</div>
</template>
<script lang="ts" setup name="Person">
import { ref, computed } from "vue";
let firstName = ref("張");
let lastName = ref("三");
// 方法會調(diào)用多次
function fullName2(){
console.log('fullName2')
return firstName.value + "-" + lastName.value;
}
// 計算屬性有緩存块茁，只會調(diào)用一次
// 這么定義的fullName是一個計算屬性，且是只讀的
/* let fullName = computed(() => {
console.log('computed-----fullName')
return firstName.value + "-" + lastName.value;
}); */
let fullName =computed({
get(){
return firstName.value + "-" + lastName.value;
},
set(val){
const [str1,str2] = val.split('-')
firstName.value=str1;
lastName.value=str2;
}
})
</script>
<style>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
.button {
margin: 0 5px;
}
.li {
font-size: 30px;
}
</style>
