掌握使用computed函數(shù)定義計(jì)算屬性
定義計(jì)算屬性
- computed函數(shù)坠陈，是用來定義計(jì)算屬性的,計(jì)算屬性不能修改。
<template>
<div class="computed">
<div>
今年:{{age}}
</div>
<div>
后年:{{newAge}}
</div>
</div>
<button @click="updateName">更新名字</button>
</template>
<script>
import { computed, ref } from 'vue'
export default {
name:'computed',
setup(){
// 1.計(jì)算屬性,當(dāng)你需要依賴現(xiàn)有的響應(yīng)式數(shù)據(jù),根據(jù)一定的邏輯得到新的數(shù)據(jù)剩岳，
// 注意：computed 返回一個默認(rèn)不可手動修改的 ref 對象贞滨，所以當(dāng)你需要在setup中使用的時候,需要使用.value進(jìn)行獲取。
const age = ref(18);
const newAge = computed(()=>{
return age.value + 2 //注意和2.x的是類似的拍棕，一定要return
})
const updateName =()=>{
age.value +=10;
}
return {
age,
newAge,
updateName
}
}
}
</script>
computed的高級使用
計(jì)算屬性高級用法晓铆，傳入對象
<template>
<div class="computed">
<div>
今年:{{age}}
</div>
<div>
后年:{{newAge}}
</div>
</div>
<input type="text" v-model="newAge">
<button @click="updateName">更新名字</button>
</template>
<script>
import { computed, ref } from 'vue'
export default {
name:'computed',
setup(){
// 1.計(jì)算屬性,當(dāng)你需要依賴現(xiàn)有的響應(yīng)式數(shù)據(jù),根據(jù)一定的邏輯得到新的數(shù)據(jù)。計(jì)算屬性不能修改
const age = ref(18);
// const newAge = computed(()=>{
// return age.value + 2 //注意和2.x的是類似的绰播，一定要return
// })
//2. 計(jì)算屬性 一個高級的用法,可以傳入一個對象（原則是計(jì)算屬性不可修改,但是高級用法讓計(jì)算屬性可以修改骄噪，同時也支持v-model雙向數(shù)據(jù)綁定。）
const newAge = computed( {
// get函數(shù).獲取計(jì)算屬性的值蠢箩。
get(){
return age.value+2
},
// set函數(shù)链蕊，當(dāng)你給計(jì)算屬性設(shè)置值的時候觸發(fā)事甜，這時候去修改依賴的響應(yīng)式數(shù)據(jù)。從而可以用v-model 進(jìn)行雙向綁定計(jì)算屬性了
set(val){
console.log(val);
age.value = val-2
}
});
const updateName =()=>{
age.value +=10;
}
return {
age,
newAge,
updateName
}
}
}
</script>
傳入一個對象(包含get方法和set方法)
總結(jié)
- 給computed傳入函數(shù)滔韵，返回值就是計(jì)算屬性的值
- 給computed傳入對象,get獲取計(jì)算屬性的值,set監(jiān)聽計(jì)算屬性改變逻谦。
