computed 是一種用于聲明計算屬性的 API。計算屬性是一種根據(jù)其他數(shù)據(jù)的變化而動態(tài)計算得到的屬性，它們的值會被緩存，只有在相關依賴發(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

// 當 data 的值變化時，squared 會自動更新
data.value = 6;
console.log(squared.value); // 輸出 36

在上面的例子中，squared 是一個計算屬性，它依賴于 data 的值。計算屬性的定義是一個函數(shù)，該函數(shù)返回計算的結果。在模板或其他計算屬性中，你可以通過訪問 squared.value 來獲取計算屬性的值。

計算屬性的依賴：
Vue 3 會追蹤計算屬性的依賴關系，當依賴的數(shù)據(jù)發(fā)生變化時，計算屬性會被重新計算。在上面的例子中，squared 依賴于 data，所以當 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

// 賦值操作會調用 setter
squared.value = 36;
console.log(data.value); // 輸出 6

在上面的例子中，當對 squared 進行賦值操作時，會調用 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("三");
// 方法會調用多次
function fullName2(){
  console.log('fullName2')
  return firstName.value + "-" + lastName.value;
}
// 計算屬性有緩存，只會調用一次
// 這么定義的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>