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

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

首先，先說一下這幾個(gè)不同在哪里，那當(dāng)然是長(zhǎng)得不一樣啦~~~，

哈哈哈哈哈不開玩笑了，截下來進(jìn)入正題。

介紹

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

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

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

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

一、作用機(jī)制上

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

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

【小結(jié)】：·methods·里面定義的函數(shù)，是需要主動(dòng)調(diào)用的，而和watch和computed相關(guān)的函數(shù)，會(huì)自動(dòng)調(diào)用,完成我們希望完成的作用。

二、從性質(zhì)上

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

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

例如：

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

你在取用的時(shí)候，用this.fullName去取用，就和取data一樣（不要當(dāng)成函數(shù)調(diào)用?。。?/p>

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

例如：

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

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

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

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

四、methods不處理數(shù)據(jù)邏輯關(guān)系，只提供可調(diào)用的函數(shù)

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

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

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

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

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

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

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

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

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