前言

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

首先，先說一下這幾個(gè)不同在哪里，那當(dā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ī)制上

computed\watch: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

1. computed 屬性值會(huì)默認(rèn)走緩存，計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，也就是基于data中聲明過的數(shù)據(jù)通過計(jì)算得到的
2. 如果一個(gè)屬性是由其他屬性計(jì)算而來的，這個(gè)屬性依賴其他屬性，是一個(gè)多對(duì)一或者一對(duì)一，一般用computed
3. 如果computed屬性屬性值是函數(shù)，那么默認(rèn)會(huì)走get方法；函數(shù)的返回值就是屬性的屬性值；在computed中的，屬性都有一個(gè)get和一個(gè)set方法，當(dāng)數(shù)據(jù)變化時(shí)，調(diào)用set方法。
4. computed計(jì)算屬性是根據(jù)依賴關(guān)系進(jìn)行緩存的計(jì)算，并且只在需要的時(shí)候進(jìn)行更新。

watch

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

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

最新評(píng)論