Vue中的methods、watch、computed的區別

看到這個標題就知道這篇文章接下來要講的內容，我們在使用vue的時候methods、watch、computed這三個特性一定經常使用，因為它們是非常的有用，但是沒有徹底的理解它們的區別和各自的使用場景，也很難用好它們，希望接下來的介紹為你答疑解惑。

computed

我們先來看計算屬性:computed，光看名字也知道是用來幹什麼的，計算屬性當然是用來計算的，但是是怎麼計算的呢？計算屬性有兩個顯著的特點：

計算屬性計算時所依賴的屬性一定是響應式依賴，否則計算屬性不會執行

計算屬性是基於依賴進行緩存的，就是說在依賴沒有更新的情況，調用計算屬性並不會重新計算，可以減少開銷

我們來看一個相關的例子：

<div id="app">

<div>{{ arr.join("") }}</div>

<div>{{ arr1 }}</div>

<div>{{ getDate }}</div>

<div>{{ getDate1 }}</div>

</div>

1

2

3

4

5

6

var app = new Vue({

el: "#app",

data: {

date: "",

arr: ["a", "b", "c"]

},

computed: {

getDate () {

return Date.now()

},

getDate1 () {

return this.date

},

arr1 () {

return this.arr.join("")

}

},

created () {

setInterval(() => {

this.date = Date.now()

}, 1000)

}

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰項目視頻進群免費領取。

看上面的例子，我們在寫vue的時候，經常會碰到要對data的值進行操作的情況，為了方便，總是會有人直接在模版中對data的值進行計算操作，就像我上面例子中寫的在模版中將數組轉化為字元串，這樣寫有問題嗎？語法沒有問題，但是在模版中使用太多的計算，維護會是個問題，換個人來看代碼的時候會很痛苦，這種寫法就好像在html中插入js的邏輯運算，可維護性極差。另外一個展示的就是computed的響應式依賴的問題，當我們調用getDate的時候返回的Date.now()返回的是一個非響應式的依賴因此getDate返回的值不會變。

應用場景

看了computed的特點之後，那麼它的應用場景是什麼呢？個人看法，但不限於以下場景：

複雜的渲染數據計算，用computed計算屬性可以減少一定計算開銷，增加可維護性

從Vuex Store中收集相關信息，對Vuex中的數據做計算的時候的要特別注意computed的緩存屬性，在對Vuex中的對象值進行屬性修改的時候，並不會觸發computed的中值的變化，這時需要Object.assign({},obj)對依賴對象進行跟新返回一個新對象觸發依賴跟新

表單校驗，這個應用場景應該是比較常見的，利用正則表達式對每個表單項的實時監控，判斷表單是否可以提交

methods

methods大家應該都會用，是vue中的方法屬性，所有的方法調用都會寫到這裡面，大家用的最多也是在累似@click這樣事件調用中使用，但是很多人都忽視methods的另一個用法，就是在模版中使用methods，下面來看一個例子：

<div id="app">

<div v-for="(item, idx) in arr">

{{ matching(item) }}

</div>

</div>

1

2

3

4

5

var app = new Vue({

el: "#app",

data: {

arr: ["a", "b", "c"],

obj: {a: "hello", b: "world"}

},

methods: {

matching (key) {

if (this.obj[key]) {

return this.obj[key]

} else {

return "not found"

}

}

}

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰項目視頻進群免費領取。

上面的例子就是methods在模版中常常使用的一個場景，當模版中的某個循環的值需要進行一定邏輯運算時，這時候你就可以使用methods方法，將對應的值傳入，然後計算出結果返回到模版顯示，這個時候用computed是沒法實現的，computed中你無法傳參，methods和computed除了這個不一樣之外，還有就是在methods中的計算是不會做緩存的，也就是你調用多少次就會計算多少次，相對computed的開銷要大一些。

watch

偵聽屬性是專門用來觀察和響應vue實例上的數據變動，能使用watch屬性的場景基本上都可以使用computed屬性，而且computed屬性開銷小，性能高，因此能使用computed就盡量使用computed屬性，那麼watch屬性是不是就沒用武之地了呢？當執行非同步操作的時候你可能就必須用watch而不是computed了，下面看一個例子：

<div id="app">

<div>{{ obj1.a }}</div>

</div>

1

2

3

var app = new Vue({

el: "#app",

data: {

obj: {a: "hello"},

obj1: {a: "hello"},

test: "aaa"

},

computed: {

getObj () {

setTimeout(() => {

this.obj.a = this.test + "word"

return this.obj

}, 1000)

}

},

watch: {

test () {

setTimeout(() => {

this.obj1.a = this.test + "word"

}, 1000)

}

},

mounted () {

this.test = "hello"

}

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

上述例子中，當在模版中調用getObj.a時，如果沒有setTimeout這非同步操作，直接返回一個值是可以直接在模版中顯示的，但是由於加非同步操作就會導致沒有返回值同時調用對象的屬性，就會報錯，而調用obj1.a卻不一樣，模版會先顯示hello，然後在觸發了watch屬性時，setTimeout觸發，一秒鐘之後模版會顯示helloword，這就watch中可以使用非同步函數，而computed不行的原因

總結

希望看了這篇文章能對你區分methods、computed、watch的用法能有所幫助。

這篇文章如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏

---------------------

作者：前端全棧君丶

原文：https://blog.csdn.net/q3254421/article/details/85323095

版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！