computed 、methods 和 watch

computed 和 methods
　　在new Vue的配置參數中的computed和methods均可以處理大量的邏輯代碼，可是何時用哪一個屬性，要好好區分一下才能作到正確的運用vue。
computed稱爲計算屬性，顧名思義，計算就要返回一個計算的結果，因此，當咱們要處理大量的邏輯，可是最後要取得最後的結果的時候能夠用computed；
簡單示例：
要求：
<input type="text v-model="num1"><input type="text v-model="num2">
如今要返回num1和num2的和；

<script>
    new Vue({ el:"#box", data:{ num1:0, num2:0 } computed:{ result:function(){ return this.num1 + this.num2 // 計算屬性必須有一個返回值
 } } }) </script>

methods：是方法的意思，在js中，咱們把一些函數叫作方法，通常狀況下，要觸發這個方法就要執行，要執行就要有一個源來觸發，因此就須要一個事件源。
這是和computed的一點不一樣之處；
methods的示例：

<\button @click="do()">點擊彈出<\/button>
<script>
    new Vue({ el:"#box", data:{ num1:0, num2:0 } methods:{ do:function(){ alert('ok') //這裏根據狀況，能夠返回有返回值也能夠沒有返回值。
 } } }) </script>

對比computed 和 methods：
computed計算的結果若是不發生改變就不會觸發result這個函數。而methods中通常都是定義的須要事件觸發的一些函數。每次只要觸發事件，
就會執行對應的方法。若是把computed中的方法寫到method中會浪費性能。
computed必須返回一個值頁面綁定的才能取得值，而methods中能夠只執行邏輯代碼，能夠有返回值，也能夠沒有

computer 和 watch

//這是computer的
var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

//這是watch的說法

var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

總結computer和watch：

計算屬性是計算屬性，觀察是觀察。

計算屬性顧名思義就是經過其餘變量計算得來的另外一個屬性，fullName在它所依賴firstName，lastName這兩個變量變化時從新計算本身的值。

另外，計算屬性具備緩存。計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要 lastName和firstName都沒有發生改變，屢次訪問 fullName計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

而觀察watch是觀察一個特定的值，當該值變化時執行特定的函數。例如分頁組件中，咱們能夠檢測頁碼執行獲取數據的函數。

能夠再詳細的查看一下文檔：https://cn.vuejs.org/v2/guide...