vue.js中methods watch和computed的區別示例詳解

前言

這篇文章主要簡述vue中的watch和computer區別，還有methods

首先，先說一下這幾個不同在哪裡，那當然是長得不一樣啦~~~，

哈哈哈哈哈不開玩笑瞭，截下來進入正題。

介紹

methods : 掛載在對象上的函數，通常是 Vue 示例本身 或 Vue 組件

computer：屬性看起來像一個方法，但其實不是，在 Vue 中我們一般使用 data 來跟蹤對特性屬性的更改。計算屬性允許我們定義一個與數據使用相同方式的屬性，但也可以有一些基於其依賴關系的自定義邏輯。你可以考慮計算屬性的另一個視圖到你的數據。

watch：這些可以讓你瞭解反應系統（Reactivity System）。我們提供瞭一些鉤子來觀察Vue存儲的任何屬性。如果我們想在每次發生變化時添加一些功能，或者響應某個特定的變化，我們可以觀察一個屬性並應用一些邏輯。這意味著觀察者的名字必須與我們所觀察到的相符。

僅憑這幾句話不能講清楚這三者之間的區別，接下來我們上例子：

一、作用機制上

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區別的文章就介紹到這瞭,更多相關vue中methods watch和computed區別內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：

• 如何理解Vue中computed和watch的區別
• 簡單聊聊Vue中的計算屬性和屬性偵聽
• Vue中的watch是什麼以及watch和computed的區別
• 計算屬性和偵聽器詳情
• Vue計算屬性與監視(偵聽)屬性的使用深度學習