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

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

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

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

介紹

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

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

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

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

一、作用機制上

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

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

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

二、從性質上

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

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

例如：

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

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

3、watch:類似于監(jiān)聽機制+事件機制

例如：

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

firstName的改變是這個特殊“事件”被觸發(fā)的條件，而firstName對應的函數(shù)就相當于監(jiān)聽到事件發(fā)生后執(zhí)行的方法。

三、watch和computed的對比watch computed 一個數(shù)據影響多個數(shù)據 一個數(shù)據受多個數(shù)據影響

watchcomputed一個數(shù)據影響多個數(shù)據一個數(shù)據受多個數(shù)據影響

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

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

new Vue({ el: ’#app’, template: ’<div ><p>{{ say() }}</p></div>’, methods: { say: function () { return ’我在他鄉(xiāng)挺好的’ } }})五、從功能的互補上看待methods,watch和computed的關系

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

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

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

六、利用computed處理watch在特定情況下代碼冗余的現(xiàn)象，簡化代碼總結computed computed 屬性值會默認走緩存，計算屬性是基于它們的響應式依賴進行緩存的，也就是基于data中聲明過的數(shù)據通過計算得到的 如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，是一個多對一或者一對一，一般用computed 如果computed屬性屬性值是函數(shù)，那么默認會走get方法；函數(shù)的返回值就是屬性的屬性值；在computed中的，屬性都有一個get和一個set方法，當數(shù)據變化時，調用set方法。 computed計算屬性是根據依賴關系進行緩存的計算，并且只在需要的時候進行更新。watch

監(jiān)聽的函數(shù)接收兩個參數(shù)，第一個參數(shù)是最新的值；第二個參數(shù)是輸入之前的值；

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

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