在 Vue.js 中，watch 和 computed 都是用來監(jiān)聽數(shù)據(jù)變化的方式，但它們的使用方式和實(shí)現(xiàn)機(jī)制有所不同，下面是它們的區(qū)別：

? 實(shí)現(xiàn)機(jī)制

watch 監(jiān)聽的是一個(gè)具體的數(shù)據(jù)，當(dāng)數(shù)據(jù)變化之后會(huì)執(zhí)行相應(yīng)的回調(diào)函數(shù)；computed 屬性就像一個(gè)響應(yīng)式的計(jì)算屬性，是基于所依賴的數(shù)據(jù)進(jìn)行緩存處理的。當(dāng)依賴的數(shù)據(jù)變化時(shí)，computed 屬性會(huì)自動(dòng)更新緩存，而數(shù)據(jù)發(fā)生變化時(shí)不會(huì)立即執(zhí)行相應(yīng)的操作，而是等待下一次任務(wù)隊(duì)列的更新時(shí)機(jī)。

? 適用場(chǎng)景

• watch 更適合有副作用的數(shù)據(jù)監(jiān)聽，例如一些需要后臺(tái)請(qǐng)求的數(shù)據(jù)；
• computed 更適合基于已有數(shù)據(jù)（data 和 props）計(jì)算得出的屬性，并且需要緩存的場(chǎng)景。

? 功能

• watch 可監(jiān)聽多個(gè)數(shù)據(jù)，可以在數(shù)據(jù)變化時(shí)做出相應(yīng)的處理；
• computed 只支持計(jì)算屬性的緩存，當(dāng)依賴的數(shù)據(jù)變化時(shí)會(huì)自動(dòng)更新緩存，而且可以設(shè)置 getter 和 setter。

? 性能

• watch 的性能較弱，因?yàn)樗O(jiān)測(cè)的是具體某一個(gè)數(shù)據(jù)或多個(gè)數(shù)據(jù)的變化，如果監(jiān)聽的數(shù)據(jù)過多，那么 watch 會(huì)對(duì)整個(gè)應(yīng)用的性能造成不良影響；
• computed 的性能較好，因?yàn)樗举|(zhì)上是一個(gè)緩存，只有當(dāng)數(shù)據(jù)發(fā)生變化時(shí)才會(huì)更新緩存，不會(huì)像 watch 一樣無腦地遍歷監(jiān)聽數(shù)據(jù)。

? 監(jiān)聽數(shù)據(jù)的不同

• watch 監(jiān)聽的是一個(gè)具體的數(shù)據(jù)，可以是一個(gè) data 中的屬性或者是一個(gè)組件外部傳遞進(jìn)來的 prop。當(dāng)該數(shù)據(jù)發(fā)生變化時(shí)，會(huì)執(zhí)行相應(yīng)的回調(diào)函數(shù)。
• computed 是一個(gè)計(jì)算屬性，它是一個(gè)基于已有數(shù)據(jù)（data 和 props）計(jì)算得出的屬性，在模板中使用時(shí)，就像一個(gè)響應(yīng)式屬性一樣。當(dāng)計(jì)算依賴的數(shù)據(jù)發(fā)生變化時(shí)，計(jì)算屬性會(huì)自動(dòng)更新，并且計(jì)算屬性具有緩存機(jī)制，在計(jì)算屬性依賴的數(shù)據(jù)未發(fā)生變化時(shí)，直接返回緩存結(jié)果。

?執(zhí)行時(shí)機(jī)的不同

• watch 是當(dāng)監(jiān)聽的數(shù)據(jù)發(fā)生變化時(shí)就會(huì)立即執(zhí)行回調(diào)函數(shù)，用于監(jiān)聽有異步操作的數(shù)據(jù)。
• computed 是每當(dāng)依賴的數(shù)據(jù)發(fā)生變化時(shí)，才會(huì)重新計(jì)算，用于在模板中處理數(shù)據(jù)的邏輯

?實(shí)現(xiàn)方式的不同

• watch 主要是通過 $watch 和 watch 對(duì)象來實(shí)現(xiàn)，$watch 可以監(jiān)聽單個(gè)數(shù)據(jù)的變化，watch 對(duì)象可以監(jiān)聽多個(gè)數(shù)據(jù)的變化。
• computed 是通過 computed 屬性來實(shí)現(xiàn)的，它接收一個(gè)對(duì)象作為參數(shù)，對(duì)象中的 key 對(duì)應(yīng)計(jì)算屬性的名稱，value 對(duì)應(yīng)計(jì)算屬性的邏輯函數(shù)。

總之，watch 更加靈活，涉及到的數(shù)據(jù)范圍也更廣泛，但相對(duì)而言性能上略遜一籌；computed 更加簡(jiǎn)潔，并且能夠節(jié)省性能，但是只適合對(duì)已有的數(shù)據(jù)進(jìn)行計(jì)算得出結(jié)果返回，一般情況下computed 是用來處理復(fù)雜的邏輯運(yùn)算，在模板中調(diào)用方便；watch 則是用來監(jiān)聽一些數(shù)據(jù)變化，通常是需要執(zhí)行異步操作時(shí)使用。文章來源地址http://www.zghlxwxcb.cn/news/detail-453834.html

到了這里，關(guān)于Vue 中的 watch 和 computed 的區(qū)別是什么？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！