目錄前言介紹一、作用機制上二、從性質上三、watch和computed的對比四、methods不處理數據邏輯關系，只提供可調用的函數五、從功能的互補上看待methods,watch和computed的關系六、利用computed處理watch在特定情況下代碼冗余的現象，簡化代碼總結computedwatch前言

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

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

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

介紹

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

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

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

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

一、作用機制上

computedwatch: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 computed 屬性值會默認走緩存，計算屬性是基于它們的響應式依賴進行緩存的，也就是基于data中聲明過的數據通過計算得到的 如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，是一個多對一或者一對一，一般用computed 如果computed屬性屬性值是函數，那么默認會走get方法；函數的返回值就是屬性的屬性值；在computed中的，屬性都有一個get和一個set方法，當數據變化時，調用set方法。 computed計算屬性是根據依賴關系進行緩存的計算，并且只在需要的時候進行更新。watch

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

computed(計算屬性) watch(偵聽屬性) 支持緩存，只有依賴數據發生改變，才會重新進行計算 不支持緩存，數據變，直接會觸發相應的操作； 不支持異步，當computed內有異步操作時無效，無法監聽數據的變化 watch支持異步；

好了，到此這篇關于vue.js中methods watch和computed區別的文章就介紹到這了,更多相關vue中methods watch和computed區別內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！