前端進階:vue中的computed和watch的異同

前言

心情很忐忑,當我寫下這個標題。想起年初時在杭州求職,電面了一家武漢的公司,面試官就拋了這樣一個問題。那時候還懵懵懂懂,就知道如何使用,並沒有太清楚兩者的區別。

開始

有時候寫這些東西,真的怕誤導了一些人,以下描述的異同,只是我個人的觀點。如果有什麼不當之處,還望各位博友指出~感謝

最近研究vue.js數據雙向綁定的原理,看了一些很好的文章,自己也跟着敲了幾遍代碼。又開始思考computed和watch兩者的異同。

實踐

隨着學習的深入,也接觸到一些前輩,可以真真切切感受到自己於他們的差距。堅持...堅持...努力,希望自己有一天也能給別人一些指引和方向~

先上一張圖,原文已經被刪了,這是我從百度快照截取的:

百度快照

這是一方面,總結一下:當我們某一個值依賴於多個值時,建議使用computed,其中任何一個值變化時,該值都能及時更新;當我們一個值被多個值依賴時,建議使用watch,當這個值變化時,所有依賴它的值都會及時更新。 (可能有些繞,但是要理解清楚,圖片更清晰)

既然這只是一方面,那麼另一方面是什麼呢?

讓我們回到官方的文檔,萬變不離其宗。我們最初學習是看文檔,遇到問題時,最好的還是回來看看文檔。

官方文檔

注意,這段描述有兩個點, 方法+數據變化 

通常我們都是在computed和watch中,根據依賴的值得變化,直接修改其他的值(比如更新data中的數據)。但是如果我們要在一個值變化時做一些其他的操作,應該怎麼辦呢?

第2點區別

是的。這纔是他們最根本的區別,現在看看文檔已經描述得如此的簡單明瞭。 當依賴的值變化時,在watch中,是可以做一些複雜的操作的,而computed中的依賴,僅僅是一個值依賴於另一個值,是值上的依賴。

總結

有時候我們忙於業務,很難停下來看看它的原理。但是現在我卻很享受這種探索的過程,一步一步翻越高山~翻過去,高山便不再是高山,遠方依然是遠方。

歡迎留言指導,感謝~或者掃描下方二維碼,與我取得聯繫~  (記得備註:CSND喔~)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章