Vue 中methods，computed watch的區別

Vue 中methods，computed，watch的區別

methods

methods中定義的都是具體的方法，根據一些觸發條件，調用一次，重新執行一次。

比如說點擊事件

<template>
    <div>
        <!-- 調用一次，執行一次 -->
        <div @click="onClick">
            
    </div>
    </div>
</template>

<script>
export default{
    methods:{
        // 定義一些事件處理函數
        onClick(){
            window.console.log("hello word")
        }
    }
}
</script>

computed

computed是vue中獨有的一個計算屬性，它是基於它們的依賴進行緩存的,只有在它的相關依賴發生改變時纔會重新求值。
就算在data中沒有直接聲明出要計算的變量，也可以直接在computed中寫入。
計算屬性默認只有getter，可以在需要的時候自己設定setter
setter默認有一個參數(用不到也可以不寫)
比如說購物車總價總價總量計算，用計算屬性實現會變得非常容易。

<script>
    export default{
        computed:{
            // 總價計算
            totalPrice(state) {
            // 聲明一個變量
            let totalPrice = 0
            // 循環購物車數組
                state.shoppingCartItem.forEach(ele => {
                    // 如果選中則累加商品價格*商品數量
                    if(ele.checked == true){
                        totalPrice += ele.count * ele.price
                    }
                })
                // 導出
            return totalPrice
        }
    }
</script>

vue中input的值雙向綁定的數據必須在data中定義，但是由於使用了vuex，數據全部定義在vuex中，所以採用計算屬性的get和set定義雙向綁定的值。

<script>
    export default{
          computed: {
            test:{
                // get方法獲取vuex的數據並return
                get(){
                    return this.$store.state.shoppingCartCheckAll
                },
                //set方法接收一個參數，這個參數就是綁定的布爾值
                //set會改變傳過來的值
                set(v){
                //window.console.log(v)
                //提交一個方法 在vuex中定義並處理
                this.$store.commit("oncheckAll",v);
                }
            }
        },
    }
</script>

總結：數據量大，需要緩存的時候用computed；每次確實需要重新加載，不需要緩存時用methods。

watch

watch的作用可以監控一個值的變換，並調用因爲變化需要執行的方法。可以通過watch動態改變關聯的狀態。

它用於觀察Vue實例上的數據變動。對應一個對象，鍵是觀察表達式，值是對應回調。值也可以是方法名，或者是對象，包含選項。

商品的多重篩選可以用到這個屬性。

<script>
    export default{
        watch: {
    filter: {
      handler: function(val, oldval) {
        window.console.log(oldval);
        // 聲明一個數組
        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);
              }
            });
          }
          // 判斷完所有下標後把定義的數組賦值給頁面顯示的數組
          // return出來
          this.currentData = arr;
        } else {
          // 如果沒有重新賦值則賦值爲原數組
          this.currentData = this.data;
        }
        let newArr = [];
        // 如果類型篩選條件不爲空,也就是重新賦值了
        if (val.type.length !== 0) {
          // 循環頁面顯示的數組
          this.currentData.forEach(ele => {
            // 如果提交的類型存在就添加到新數組
            if (val.type === ele.type) {
              newArr.push(ele);
            }
          });
          // 賦值
          this.currentData = newArr;
        } else {
          newArr = this.currentData;
        }
      },
      deep:true
    }
  },
    }
</script>

computed 和 watch 都可以觀察頁面的數據變化。當處理頁面的數據變化時，我們有時候很容易濫用watch。 而通常更好的辦法是使用computed屬性，而不是命令是的watch回調。

儘量用computed計算屬性來監視數據的變化，因爲它本身就這個特性，用watch沒有computed“自動”，手動設置使代碼變複雜。

在大多數情況下computed屬性都能夠代替watch屬性使用，但是在有些情況下我們需要自定義一個watcher，在數據變化時來執行異步操作，這時watch是非常有用的。