方法-計算屬性-偵聽器的區(qū)別.
需求分析
- 初始化時計算并顯示總價
- 單擊按鈕灿椅，獲取新的數據，并重新計算總價
- 分別用methods(方法),computed(計算屬性),watch(偵聽器)來實現以上需求
用methods（方法）來實現
模板
<div id="app">
<p>商品數量：<input type="text" class="num" v-model="num1"></p>
<p><button @click="changeNum">改變數量</button></p>
<p>顯示總價：{{getTotal()}}</p>
<hr>
<p>使用總價：{{getTotal()}}</p>
</div>
js代碼
<script>
var vm = new Vue({
el: '#app',
// 如果需要數據改變時，觸發(fā)視圖更新，就要把數據注冊在data中
// 響應式數據
data: {
price: 200,
num1: '',
num2: 3
},
methods: {
// 有返回值的methods中模板中直接調用時，要加()
getTotal(){
console.log('計算一次');
let total;
total = this.price * this.num2
return total
},
changeNum(){
this.num2 = this.num1;
}
}
});
</script>
用computed(計算屬性)來實現
模板
<div id="app">
<p>商品數量：<input type="text" class="num" v-model="num1"></p>
<p><button @click="changeNum">改變數量</button></p>
<p :title="getTotal">顯示總價：{{getTotal + 1}}</p>
<hr>
<p>使用總價：{{getTotal}}</p>
</div>
js代碼
<script>
var vm = new Vue({
el: '#app',
data: {
price: 200,
num1: '',
num2: 3
},
// 計算屬性是一個有返回值的函數，通過對數據進行處理鲫售，返回一個結果
// 在模板中，可以把getTotal視為一個data中的數據
computed:{
getTotal(){
console.log('計算一次');
let total;
total = this.price * this.num2
return total
}
},
methods: {
changeNum(){
this.num2 = this.num1;
}
}
});
</script>
總結： 計算屬性computed和方法methods的區(qū)別
如果一個業(yè)務流程沒有返回值该肴，則用methods實現情竹，有返回值，用computed和methods都可以實現
計算屬性和方法都是函數匀哄，計算屬性一定有返回值秦效，它通過對數據進行處理，返回一個結果
在模板中調用時拱雏，計算屬性不加(),而methods必須需要加()
計算屬性和方法最主要的區(qū)別是計算屬性有緩存功能棉安。
方法被調用時每次都要重復執(zhí)行函數
計算屬性初次調用時執(zhí)行函數，然后會緩存結果铸抑。當再次被調用時贡耽，如果依賴的響應式數據沒有發(fā)生改變，則直接返回之前緩存的結果 鹊汛。如果依賴發(fā)生了改變蒲赂，則會再次執(zhí)行函數并緩存結果
用watch(偵聽器)來實現
模板
<div id="app">
<p>商品數量：<input type="text" class="num" v-model="num1"></p>
<p><button @click="changeNum">改變數量</button></p>
<p>顯示總價：{{getTotal}}</p>
<hr>
<p>使用總價：{{getTotal}}</p>
</div>
js代碼
<script>
var vm = new Vue({
el: '#app',
data: {
price: 200,
num1: '',
num2: 3,
getTotal: 0
},
methods: {
changeNum() {
this.num2 = this.num1;
}
},
// 偵聽器默認在頁面初始化時不執(zhí)行，只有偵聽數據發(fā)生變化才會執(zhí)行
watch: {
// 偵聽響應式數據num2的更新刁憋，只要num2數據更新滥嘴，就觸發(fā)該偵聽器(函數)
num2(){
console.log('偵聽num2一次');
this.getTotal = this.price * this.num2
},
price(){
console.log('偵聽price一次');
this.getTotal = this.price * this.num2
}
}
});
偵聽器的配置
偵聽器默認在頁面初始化時不執(zhí)行，只有偵聽數據發(fā)生變化才會執(zhí)行,如果需要初始化時立即執(zhí)行至耻，要配置immediate選項
watch: {
// 偵聽響應式數據num2的更新若皱，只要num2數據更新镊叁，就觸發(fā)該偵聽器(函數)
num2: {
handler() {
console.log('偵聽num2一次');
this.getTotal = this.price * this.num2
},
//初始化時即自動執(zhí)行一次
immediate: true
}
}
watch和computed的區(qū)別
computed一定有返回值，而watch不需要返回值
computed是依賴的數據發(fā)生改變時重新調用, watch是監(jiān)聽的響應式數據發(fā)生改變時重新調用
watch和methods的區(qū)別
methods是每次調用都會執(zhí)行函數
watch不需要調用,并且只有監(jiān)聽數據發(fā)生改變時才會重新調用
