計算屬性computed:
- 支援緩存,隻有依賴資料發生改變,才會重新進行計算
- 不支援異步,當computed内有異步操作時無效,無法監聽資料的變化
- computed 屬性值會預設走緩存,計算屬性是基于它們的響應式依賴進行緩存的,也就是基于data中聲明過的資料 通過計算得到的
- 如果一個屬性是由其他屬性計算而來的,這個屬性依賴其他屬性,是一個多對一或者一對一,一般用computed
- 如果computed屬性屬性值是函數,那麼預設會走get方法;函數的傳回值就是屬性的屬性值;在computed中的,屬性都有一個get和一個set方法,當資料變化時,調用set方法。
- computed中屬性不能和data、methods中的重名;
偵聽屬性watch:
- 不支援緩存,資料變,直接會觸發相應的操作;
- watch支援異步;
- 監聽的函數接收兩個參數,第一個參數是最新的值;第二個參數是輸入之前的值;
watch: {
val:function(newVal,oldVal){
console.log(newVal,oldVal)
}
}
- 當一個屬性發生變化時,需要執行對應的操作;一對多;
- watch方法監聽的屬性,data中已建立的;
例1:當一個屬性依賴多個屬性改變時
<template>
<div>
<input type="text" v-model="val1" />+
<input type="text" v-model="val2" />={{ count}}
</div>
</template>
watch偵聽
<script>
export default {
data() {
return {
val1: 0,
val2: 0,
count: 0,
};
},
watch: {
val1: function () {
this.count= parseFloat(this.val1) + parseFloat(this.val2);
},
val2: function () {
this.count= parseFloat(this.val1) + parseFloat(this.val2) ;
},
},
};
</script>
此時用computed 計算屬性,就簡單多了
<script>
export default {
data() {
return {
val1: 0,
val2: 0
};
},
computed: {
count: {
get:function(){
return parseFloat(this.val1)+parseFloat(this.val2)
}
}
}
};
</script>