methods
methods中定義的都是具體的方法滋戳，根據(jù)一些觸發(fā)條件钻蔑，調用一次啥刻，重新執(zhí)行一次。
比如說點擊事件
<template>
<div>
<!-- 調用一次咪笑，執(zhí)行一次 -->
<div @click="onClick">
</div>
</div>
</template>
<script>
export default{
methods:{
// 定義一些事件處理函數(shù)
onClick(){
window.console.log("hello word")
}
}
}
</script>
computed
- computed是vue中獨有的一個計算屬性可帽，它是基于它們的依賴進行緩存的,只有在它的相關依賴發(fā)生改變時才會重新求值。
- 就算在data中沒有直接聲明出要計算的變量窗怒，也可以直接在computed中寫入映跟。
- 計算屬性默認只有getter，可以在需要的時候自己設定setter
- setter默認有一個參數(shù)(用不到也可以不寫)
比如說購物車總價總價總量計算扬虚，用計算屬性實現(xiàn)會變得非常容易努隙。
<script>
export default{
computed:{
// 總價計算
totalPrice(state) {
// 聲明一個變量
let totalPrice = 0
// 循環(huán)購物車數(shù)組
state.shoppingCartItem.forEach(ele => {
// 如果選中則累加商品價格*商品數(shù)量
if(ele.checked == true){
totalPrice += ele.count * ele.price
}
})
// 導出
return totalPrice
}
}
</script>
vue中input的值雙向綁定的數(shù)據(jù)必須在data中定義，但是由于使用了vuex孔轴，數(shù)據(jù)全部定義在vuex中剃法，所以采用計算屬性的get和set定義雙向綁定的值。
<script>
export default{
computed: {
test:{
// get方法獲取vuex的數(shù)據(jù)并return
get(){
return this.$store.state.shoppingCartCheckAll
},
//set方法接收一個參數(shù)路鹰，這個參數(shù)就是綁定的布爾值
//set會改變傳過來的值
set(v){
//window.console.log(v)
//提交一個方法 在vuex中定義并處理
this.$store.commit("oncheckAll",v);
}
}
},
}
</script>
總結：數(shù)據(jù)量大，需要緩存的時候用computed收厨；每次確實需要重新加載，不需要緩存時用methods。
watch
watch的作用可以監(jiān)控一個值的變換疗琉，并調用因為變化需要執(zhí)行的方法簿寂。可以通過watch動態(tài)改變關聯(lián)的狀態(tài)拧额。
它用于觀察Vue實例上的數(shù)據(jù)變動碑诉。對應一個對象，鍵是觀察表達式侥锦，值是對應回調进栽。值也可以是方法名，或者是對象恭垦，包含選項快毛。
商品的多重篩選可以用到這個屬性。
<script>
export default{
watch: {
filter: {
handler: function(val, oldval) {
window.console.log(oldval);
// 聲明一個數(shù)組
let arr = [];
// 每次點擊價格篩選就會給對象的價格條件屬性重新賦值
// 如果不等于初始設置的值
if (val.price !== -1) {
// 如果重新賦值為0判斷
if (val.price === 0) {
this.data.forEach(ele => {
if (ele.price < 3999) {
arr.push(ele);
}
});
} else if (val.price === 1) {
this.data.forEach(ele => {
if (ele.price >= 4000 && ele.price <= 4499) {
arr.push(ele);
}
});
} else if (val.price === 2) {
this.data.forEach(ele => {
if (ele.price >= 4500 && ele.price <= 4999) {
arr.push(ele);
}
});
}
// 判斷完所有下標后把定義的數(shù)組賦值給頁面顯示的數(shù)組
// return出來
this.currentData = arr;
} else {
// 如果沒有重新賦值則賦值為原數(shù)組
this.currentData = this.data;
}
let newArr = [];
// 如果類型篩選條件不為空,也就是重新賦值了
if (val.type.length !== 0) {
// 循環(huán)頁面顯示的數(shù)組
this.currentData.forEach(ele => {
// 如果提交的類型存在就添加到新數(shù)組
if (val.type === ele.type) {
newArr.push(ele);
}
});
// 賦值
this.currentData = newArr;
} else {
newArr = this.currentData;
}
},
deep:true
}
},
}
</script>
computed 和 watch 都可以觀察頁面的數(shù)據(jù)變化番挺。當處理頁面的數(shù)據(jù)變化時唠帝，我們有時候很容易濫用watch。 而通常更好的辦法是使用computed屬性玄柏，而不是命令是的watch回調襟衰。
盡量用computed計算屬性來監(jiān)視數(shù)據(jù)的變化，因為它本身就這個特性粪摘，用watch沒有computed“自動”瀑晒，手動設置使代碼變復雜绍坝。
在大多數(shù)情況下computed屬性都能夠代替watch屬性使用，但是在有些情況下我們需要自定義一個watcher瑰妄，在數(shù)據(jù)變化時來執(zhí)行異步操作陷嘴，這時watch是非常有用的。
