Vue中的computed和watch的區別

Vue項目開發中，有這麼兩個屬性比較容易混淆，若是不特別注意，用法比較類似，這兩個屬性就是computed和watch，其實這兩個仍是有很大差異，下面就講講這兩個屬性的用法及不一樣
先說說爲何比較像，咱們看下面代碼。

<template>
  <div>
    <input type="text" v-model="a" />
    <div>a={{ a }}</div>
    <div>b={{ b }}</div>
    <div>c={{ c }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: 1,
      c: 0
    }
  },
  watch: {
    a(val) {
      console.log(val)
      this.c = val + '數據'
    }
  },
  computed: {
    b: function() {
      return this.a + '數據'
    }
  }
}
</script>

經過代碼和gif能夠看到當我輸入框在變的狀況下，b和c數據始終保持一致，這種效果項目中可能會用到。因此說不少人容易混淆，分不清用法。接下來就說說他們的用法和不一樣。

1 computed：計算屬性

computed官方定義計算屬性，模板內使用表達式是很是便利，可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。因此，對於任何複雜邏輯，你都應當使用計算屬性。

<template>
  <div>
    <input type="text" v-model="a" />
    <br />
    <button @click="setb()">設置b</button>
    <div>a={{ a }}</div>
    <div>b={{ b }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: ''
    }
  },
  computed: {
    b: {
      get: function() {
        console.log('獲取b')
        return this.a
      },
      set: function(val) {
        console.log('設置b值')
        console.log('傳入值：' + val)
        console.log('b值：' + this.b)
      }
    }
  },
  methods: {
    setb() {
      this.b = 1
    }
  }
}
</script>

當咱們點擊按鈕「設置b」時，咱們會給b設置一個值「1」，經過set方法能夠獲取到設置的值，可是咱們打印b值，實際上是沒有變化的。computed裏的數據有get和set方法，可是咱們經常使用的是get方法，通常不多用set方法。

從上面能夠看出，computed支持緩存，屬性值會默認走緩存，只有基於data中聲明過或者父組件傳遞的props中的數據經過計算獲得的值發生改變，纔會從新進行計算。

強調一點，使用computed的數據不能在data中聲明，不然會提示錯誤，而且函數也不在執行。

2 watch：監聽屬性
雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的偵聽器。這就是爲何 Vue 經過 watch 選項提供了一個更通用的方法，來響應數據的變化。當須要在數據變化時執行異步或開銷較大的操做時，這個方式是最有用的。

<template>
  <div>
    <input type="text" v-model="a" />
    <div>a={{ a }}</div>
    <div>c={{ c }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: '',
      c: ''
    }
  },
  watch: {
    a(val) {
      console.log(val)
      this.c = val + '數據'
    }
  }
}
</script>

上面的代碼是，監聽a，若是a發生變化，就在a的後面加上「數據」，把值保存給c。watch監聽不支持緩存，數據發生變化，會直接觸發相應的操做，監聽的函數接收兩個參數，第一個參數是最新的值；第二個參數是輸入以前的值；具體內容請參考另一篇文章
Vue中watch的詳細用法。
注：監聽的數據必須是data中聲明的或者父組件傳遞過來的數據。

3 總結
Computed特色：
須要主動調用，具備緩存能力只有數據再次改變纔會從新渲染，不然就會直接拿取緩存中的數據。
Watch特色：
不管在哪隻要被綁定數據發生變化Watch就會響應，這個特色很適合在異步操做時用上。