kinanson的技術回憶

前言

這個官網尚未提到，所以即然實做了，就記錄下來以備忘，也希望能幫到同樣有此需求的人，通常我們當要做一些值的處理，在vue裡面通常都是使用watch的方式來觀察，這在針對一個值的還好處理，但如果是有多個值要做運算，最後在綁定回一個值的時候，就不好處理了，接下來就模擬一下我說明的情境

情境模擬

就以上面的範例來說，我們有一個對象，有四個數值，有一個total的數值是另外三個數值的加總，程式碼示意如下

<div id="app">
  number1
  <input type="number" v-model="model.number1" />
   number2
  <input type="number" v-model="model.number2" />
   number3
  <input type="number" v-model="model.number3" />
  <hr />
   total
  <input type="number" v-model="model.total" />
</div>

<script>
let app=new Vue({
  el:'#app',
  data:{
    model:{
      number1:1,
      number2:2,
      number3:3,
      total:6
    }
  }
})
</script>

現在我們如果想要把number1和2和3加起來為total6的值，最簡單的方式就是使用一個beforeUpdate的生命週期來強迫只要整個畫面有值異動，就會通知我們

let app = new Vue({
  el: "#app",
  data: {
    model: {
      number1: 1,
      number2: 2,
      number3: 3,
      total: 6
    }
  },
  beforeUpdate() {
    this.model.total =
      this.model.number1 + this.model.number2 + this.model.number3;
  }
});

但是思考一下如果我們的畫面資料非常複雜的話，這樣子做的話每個畫面觸動都去觸發，其實對效能非常的不好，那我們是否能只watch某一個對象呢，雖然官網比較沒有著墨到這塊，所以這邊我還是記錄一下如何操作，請見下方程式碼示例

let app = new Vue({
  el: "#app",
  data: {
    model: {
      number1: 1,
      number2: 2,
      number3: 3,
      total: 6
    }
  },
  watch: {
    model: {
      handler(newVal) {
        this.model.total = newVal.number1 + newVal.number2 + newVal.number3;
      },
      deep: true
    }
  }
});

如果我們的物件裡的物件的話，就可以改成如下

let app = new Vue({
  el: "#app",
  data: {
    model: {
      number1: 1,
      number2: 2,
      number3: 3,
      total: 6
    }
  },
  watch: {
    'viewModel.model': {
      handler(newVal) {
        this.model.total = newVal.number1 + newVal.number2 + newVal.number3;
      },
      deep: true
    }
  }
});

同樣的watch一個陣列也是使用同一種方式來實做，不過如果我們想要watch的只是一個對象裡面的一個屬性呢，請參考以下程式碼示例。

 watch: {
    'pageDto.currentPage': function (value) {
      console.log(value)
    }
  }

有時候為了程式碼的原因，還是很有機會使用到watch的方式，比如說分頁的時候，每次分頁時現在頁面都會切換，就可以去watch現在的頁數，並去呼叫實做的邏輯