Vue中的methods、watch、computed的區別

看到這個標題就知道這篇文章接下來要講的內容，咱們在使用vue的時候methods、watch、computed這三個特性必定常用，由於它們是很是的有用，可是沒有完全的理解它們的區別和各自的使用場景，也很難用好它們，但願接下來的介紹爲你答疑解惑。

computed

咱們先來看計算屬性:computed，光看名字也知道是用來幹什麼的，計算屬性固然是用來計算的，可是是怎麼計算的呢？計算屬性有兩個顯著的特色：

• 計算屬性計算時所依賴的屬性必定是響應式依賴，不然計算屬性不會執行
• 計算屬性是基於依賴進行緩存的，就是說在依賴沒有更新的狀況，調用計算屬性並不會從新計算，能夠減小開銷 咱們來看一個相關的例子：

<div id="app">
 <div>{{ arr.join('') }}</div>
 <div>{{ arr1 }}</div>
 <div>{{ getDate }}</div>
 <div>{{ getDate1 }}</div>
</div>

var app = new Vue({
 el: '#app',
 data: {
  date: '',
  arr: ['a', 'b', 'c']
 },
 computed: {
  getDate () {
   return Date.now()
  },
  getDate1 () {
   return this.date
  },
  arr1 () {
   return this.arr.join('')
  }
 },
 created () {
  setInterval(() => {
   this.date = Date.now()
  }, 1000)
 }
})

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

看上面的例子，咱們在寫vue的時候，常常會碰到要對data的值進行操做的狀況，爲了方便，老是會有人直接在模版中對data的值進行計算操做，就像我上面例子中寫的在模版中將數組轉化爲字符串，這樣寫有問題嗎？語法沒有問題，可是在模版中使用太多的計算，維護會是個問題，換我的來看代碼的時候會很痛苦，這種寫法就好像在html中插入js的邏輯運算，可維護性極差。另一個展現的就是computed的響應式依賴的問題，當咱們調用getDate的時候返回的Date.now()返回的是一個非響應式的依賴所以getDate返回的值不會變。

應用場景

看了computed的特色以後，那麼它的應用場景是什麼呢？我的見解，但不限於如下場景：

• 複雜的渲染數據計算，用computed計算屬性能夠減小必定計算開銷，增長可維護性
• 從Vuex Store中收集相關信息，對Vuex中的數據作計算的時候的要特別注意computed的緩存屬性，在對Vuex中的對象值進行屬性修改的時候，並不會觸發computed的中值的變化，這時須要Object.assign({},obj)對依賴對象進行跟新返回一個新對象觸發依賴跟新
• 表單校驗，這個應用場景應該是比較常見的，利用正則表達式對每一個表單項的實時監控，判斷表單是否能夠提交 methods

methods你們應該都會用，是vue中的方法屬性，全部的方法調用都會寫到這裏面，你們用的最多也是在累似@click這樣事件調用中使用，可是不少人都忽視methods的另外一個用法，就是在模版中使用methods，下面來看一個例子：

<div id="app">
 <div v-for="(item, idx) in arr">
  {{ matching(item) }}
 </div>
</div>

var app = new Vue({
 el: '#app',
 data: {
  arr: ['a', 'b', 'c'],
  obj: {a: 'hello', b: 'world'}
 },
 methods: {
  matching (key) {
   if (this.obj[key]) {
    return this.obj[key]
   } else {
    return 'not found'
   }
  }
 }
})

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

上面的例子就是methods在模版中經常使用的一個場景，當模版中的某個循環的值須要進行必定邏輯運算時，這時候你就可使用methods方法，將對應的值傳入，而後計算出結果返回到模版顯示，這個時候用computed是無法實現的，computed中你沒法傳參，methods和computed除了這個不同以外，還有就是在methods中的計算是不會作緩存的，也就是你調用多少次就會計算多少次，相對computed的開銷要大一些。

watch

偵聽屬性是專門用來觀察和響應vue實例上的數據變更，能使用watch屬性的場景基本上均可以使用computed屬性，並且computed屬性開銷小，性能高，所以能使用computed就儘可能使用computed屬性，那麼watch屬性是否是就沒用武之地了呢？當執行異步操做的時候你可能就必須用watch而不是computed了，下面看一個例子：

<div id="app">
 <div>{{ obj1.a }}</div>
</div>

var app = new Vue({
 el: '#app',
 data: {
  obj: {a: 'hello'},
  obj1: {a: 'hello'},
  test: 'aaa'
 },
 computed: {
  getObj () {
   setTimeout(() => {
    this.obj.a = this.test + 'word'
    return this.obj
   }, 1000)
  }
 },
 watch: {
  test () {
   setTimeout(() => {
    this.obj1.a = this.test + 'word'
   }, 1000)
  }
 },
 mounted () {
  this.test = 'hello'
 }
})

上述例子中，當在模版中調用getObj.a時，若是沒有setTimeout這異步操做，直接返回一個值是能夠直接在模版中顯示的，可是因爲加異步操做就會致使沒有返回值同時調用對象的屬性，就會報錯，而調用obj1.a卻不同，模版會先顯示hello，而後在觸發了watch屬性時，setTimeout觸發，一秒鐘以後模版會顯示helloword，這就watch中可使用異步函數，而computed不行的緣由

總結

但願看了這篇文章能對你區分methods、computed、watch的用法能有所幫助。 這篇文章若是有錯誤或不嚴謹的地方，歡迎批評指正，若是喜歡，歡迎點贊收藏