vue.js中methods watch和computed的區別是什么

這篇文章給大家介紹vue.js中methods watch和computed的區別是什么，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

一、作用機制上

computed\watch:watch和computed都是以Vue的依賴追蹤機制為基礎的，它們都試圖處理這樣一件事情：當某一個數據（稱它為依賴數據）發生變化的時候，所有依賴這個數據的“相關”數據“自動”發生變化，也就是自動調用相關的函數去實現數據的變動。

methods:methods里面是用來定義函數的，很顯然，它需要手動調用才能執行。而不像watch和computed那樣，“自動執行”預先定義的函數。

【小結】：·methods·里面定義的函數，是需要主動調用的，而和watch和computed相關的函數，會自動調用,完成我們希望完成的作用。

二、從性質上

1、methods里面定義的是函數，你顯然需要像"fuc()"這樣去調用它（假設函數為fuc）。

2、computed是計算屬性，事實上和和data對象里的數據屬性是同一類的（使用上）

例如：

computed:{
   fullName: function () { return  this.firstName + lastName }
}

你在取用的時候，用this.fullName去取用，就和取data一樣（不要當成函數調用！！）

3、watch:類似于監聽機制+事件機制

例如：

watch: {
   firstName: function (val) {  this.fullName = val + this.lastName }
}

firstName的改變是這個特殊“事件”被觸發的條件，而firstName對應的函數就相當于監聽到事件發生后執行的方法。

三、watch和computed的對比

watch	computed
一個數據影響多個數據	一個數據受多個數據影響

watchcomputed一個數據影響多個數據一個數據受多個數據影響

四、methods不處理數據邏輯關系，只提供可調用的函數

相比于watch/computed，methods不處理數據邏輯關系，只提供可調用的函數

new Vue({
  el: '#app',
  template: '<div ><p>{{ say() }}</p></div>',
  methods: {
    say: function () {
      return '我在他鄉挺好的'
    }
  }
})

五、從功能的互補上看待methods,watch和computed的關系

在很多時候，computed是用來處理你使用watch和methods的時候無法處理，或者是處理起來并不太恰當的情況的
利用computed處理methods存在的重復計算情況

1.methods里面的函數就是一群“耿直Boy”，如果有其他父函數調用它，它會每一次都“乖乖”地執行并返回結果，即使這些結果很可能是相同的，是不需要的

2.而computed是一個“心機Boy”，它會以Vue提供的依賴追蹤系統為基礎，只要依賴數據沒有發生變化,computed就不會再度進行計算

六、利用computed處理watch在特定情況下代碼冗余的現象，簡化代碼

總結

computed

1. computed 屬性值會默認走緩存，計算屬性是基于它們的響應式依賴進行緩存的，也就是基于data中聲明過的數據通過計算得到的

2. 如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，是一個多對一或者一對一，一般用computed

3. 如果computed屬性屬性值是函數，那么默認會走get方法；函數的返回值就是屬性的屬性值；在computed中的，屬性都有一個get和一個set方法，當數據變化時，調用set方法。

4. computed計算屬性是根據依賴關系進行緩存的計算，并且只在需要的時候進行更新。

watch

監聽的函數接收兩個參數，第一個參數是最新的值；第二個參數是輸入之前的值；

關于vue.js中methods watch和computed的區別是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。