vue中 computed和watch的一些簡單理解（區別）

       今天看到一個問題，就是vue的computed和watch要在哪些場景下使用，其實也就是在問他們的區別。computed也就是計算屬性，它可以幫助我們將在模板中的一些稍微複雜的邏輯計算放回到js代碼中，方便理解與修改維護；就拿官網給的例子，如下代碼片段。

<div id="example">
  {{ message.split('').reverse().join('') + number }}
</div>

這js片段雖然看起來挺簡單的，但是，如果以後多了需求，要做多一兩步的邏輯，在模板裏面維護起來就麻煩了，所以類似這種的，我們將其寫到computed計算屬性裏面。也就是下面這樣子，這樣子看起來美觀，一看就清楚這是幹啥用的

<template>
  <div>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  name: 'test1',
  data () {
    return {
      message: 'hello world',
      number: 1
    }
  },
  computed: {
    // 字符串反轉
    reversedMessage () {
      return this.message.split('').reverse().join('') + this.number
    }
  }
}
</script>

        在computed中定義的每一個計算屬性，都會被緩存起來，只有當計算屬性裏面依賴的一個或多個屬性變化了，纔會重新計算當前計算屬性的值。上面的代碼片段中，在reversedMessage中，它依賴了message和number這兩個屬性，一旦其中一個變化了，reversedMessage會立刻重新計算輸出新值。

       watch是屬性監聽器，一般用來監聽屬性的變化（也可以用來監聽計算屬性函數），並做一些邏輯。在這裏就稍微說下他監聽屬性的功能吧。

<template>
  <div>
    <p>{{ this.number }}</p>
  </div>
</template>

<script>
export default {
  name: 'test1',
  data () {
    return {
      number: 1
    }
  },
  created () {
    setTimeout(() => {
      this.number = 100
    }, 2000)
  },
  watch: {
    number (newVal, oldVal) {
      console.log('number has changed: ', newVal)
    }
  }
}
</script>

       上面的代碼中，我們在watch中監聽了number屬性，並且在實例創建後2s執行對number屬性的值的更改。我們可以在控制檯中看到2s後打印瞭如下圖：

就我自己目前來說，watch一般就用來一個數據來影響多個數據的操作，或者比如說是用來監聽input然後進行一些即時搜索操作什麼的。

       大概總結一下，computed和watch的使用場景並不一樣，computed的話是通過幾個數據的變化，來影響一個數據，而computed的話，是可以一個數據的變化，去影響多個數據。