30. Vue計算屬性Computed
1. 定義
Computed屬性是Vue中的一個計算屬性落恼，是一種基于其它屬性值計算而來的屬性值颖医，具有緩存機制降传，在依賴的屬性值發(fā)生變化時會重新計算绸硕。
使用computed屬性可以避免在模板中書寫過多的計算邏輯羞芍，提高代碼可讀性和維護性哗戈。
下面是一個計算屬性的示例：
<template>
<div>
<h3>單價： ￥{{ price }}</h3>
<input type="text" v-model="count" placeholder="請輸入數(shù)量">個
<h3>總價： ￥{{ totalPrice }}</h3>
</div>
</template>
<!-- vue2 -->
<script>
export default {
data() {
return {
price: 12,
count: null
}
},
computed: {
totalPrice() {
return this.price * this.count
}
}
}
</script>
<!-- vue3 -->
<script setup>
import { ref, computed } from "vue"
const price = ref(12)
const count = ref(0)
const totalPrice = computed(() => {
return price.value * count.value
})
</script>
2. computed和methods對比
計算屬性是有緩存的, 當我們多次使用計算屬性時, 計算屬性中的運算只會執(zhí)行一次。如下圖：
<template>
<div>
<div>{{ fullName }}</div>
<div>{{ fullName }}</div>
<div>{{ fullName }}</div>
<div>{{ fullName }}</div>
<div>{{ fullName }}</div>
<div>{{ fullName }}</div>
<div>{{ getFullName() }}</div>
<div>{{ getFullName() }}</div>
<div>{{ getFullName() }}</div>
<div>{{ getFullName() }}</div>
<div>{{ getFullName() }}</div>
</div>
</template>
<!-- vue2 -->
<script>
export default {
data() {
return {
firstName: "Jack",
lastName: "Ma"
}
},
computed: {
fullName() {
console.log("computed獲取fullname");
return this.firstName + this.lastName;
}
},
methods:{
getFullName() {
console.log("methods獲取fullname");
return this.firstName * this.lastName;
}
}
}
</script>
<!-- vue3 -->
<script setup>
import { ref, computed } from "vue"
const firstName = ref("J.K.")
const lastName = ref("Rowling")
const fullName = computed(() => {
console.log("computed獲取full");
return firstName.value + lastName.value
})
const getFullName = function() {
console.log("methods獲取full");
return firstName.value + lastName.value
}
</script>
computed緩存
3. Getter和Setter
計算屬性默認是只讀的荷科，也就是只用到getter唯咬。當你嘗試修改一個計算屬性時，你會收到一個運行時警告畏浆。只在某些特殊場景中你可能才需要用到“可寫”的屬性胆胰，你可以通過同時提供 getter 和 setter 來創(chuàng)建：
<!-- vue2 -->
<script>
export default {
data() {
return {
firstName: "Jack",
lastName: "Ma"
}
},
computed: {
fullName: {
// getter
get() {
return this.firstName + this.lastName;
},
// setter
set(newValue) {
// 注意：我們這里使用的是解構(gòu)賦值語法
[this.firstName, this.lastName] = newValue.split(' ')
}
}
},
methods:{
setNewName(){
//設置值觸發(fā)setter
this.fullName = "Tom Mao"
console.log(this.firstName, this.lastName);
}
}
}
</script>
<!-- vue3 -->
<script setup>
import { ref, computed } from "vue"
const firstName = ref("J.K.")
const lastName = ref("Rowling")
const fullName = computed({
get() {
return firstName.value + lastName.value
},
set(newValue) {
[firstName.value, lastName.value] = newValue.split(' ')
}
})
const setNewName = function() {
fullName.value = "John Doe"
}
</script>
4. Getter 不應有副作用
需要注意的是，computed屬性必須返回一個值刻获，不能有副作用蜀涨，如修改數(shù)據(jù)或觸發(fā)異步操作等。如果需要有副作用的計算，可以使用watch屬性厚柳。
