概述

我們?cè)?Vue 項(xiàng)目中多多少少都會(huì)有用到 computed 和 watch，這兩個(gè)看似都能實(shí)現(xiàn)對(duì)數(shù)據(jù)的監(jiān)聽(tīng)，但還是有區(qū)別。所以以下通過(guò)一個(gè)小栗子來(lái)理解一下這兩者的區(qū)別。

computed 計(jì)算屬性

計(jì)算屬性基于 data 中聲明過(guò)或者父組件傳遞的 props 中的數(shù)據(jù)通過(guò)計(jì)算得到的一個(gè)新值，這個(gè)新值只會(huì)根據(jù)已知值的變化而變化，簡(jiǎn)言之：這個(gè)屬性依賴(lài)其他屬性，由其他屬性計(jì)算而來(lái)的。

<p>姓名：{{ fullName }}</p>... ...data: { firstName: ’David’, lastName: ’Beckham’},computed: { fullName: function() { //方法的返回值作為屬性值 return this.firstName + ’ ’ + this.lastName }}

在 computed 屬性對(duì)象中定義計(jì)算屬性的方法，和取data對(duì)象里的數(shù)據(jù)屬性一樣以屬性訪問(wèn)的形式調(diào)用，即在頁(yè)面中使用 {{ 方法名 }} 來(lái)顯示計(jì)算的結(jié)果。

注：計(jì)算屬性 fullName 不能在 data 中定義，而計(jì)算屬性值的相關(guān)已知值在data中；

如果 fullName 在 data 中定義了會(huì)報(bào)錯(cuò)如下圖：

因?yàn)槿绻?computed 屬性值是一個(gè)函數(shù)，那么默認(rèn)會(huì)走get方法，必須要有一個(gè)返回值，函數(shù)的返回值就是屬性的屬性值。計(jì)算屬性定義了 fullName 并返回對(duì)應(yīng)的結(jié)果給這個(gè)變量，變量不可被重復(fù)定義和賦值。

在官方文檔中，還強(qiáng)調(diào)了 computed 一個(gè)重要的特點(diǎn)，就是 computed 帶有緩存功能。比如我在頁(yè)面中多次顯示 fullName：

<p>姓名：{{ fullName }}</p><p>姓名：{{ fullName }}</p><p>姓名：{{ fullName }}</p><p>姓名：{{ fullName }}</p><p>姓名：{{ fullName }}</p>... ... computed: { fullName: function () { console.log(’computed’) // 在控制臺(tái)只打印了一次 return this.firstName + ’ ’ + this.lastName }}

我們知道 computed 內(nèi)定義的 function 只執(zhí)行一次，僅當(dāng)初始化顯示或者相關(guān)的 data、props 等屬性數(shù)據(jù)發(fā)生變化的時(shí)候調(diào)用；

而 computed 屬性值默認(rèn)會(huì)緩存計(jì)算結(jié)果，計(jì)算屬性是基于它們的響應(yīng)式依賴(lài)進(jìn)行緩存的；

只有當(dāng) computed 屬性被使用后，才會(huì)執(zhí)行 computed 的代碼，在重復(fù)的調(diào)用中，只要依賴(lài)數(shù)據(jù)不變，直接取緩存中的計(jì)算結(jié)果。只有依賴(lài)型數(shù)據(jù)發(fā)生改變，computed 才會(huì)重新計(jì)算。

計(jì)算屬性的高級(jí)：

在computed 中的屬性都有一個(gè) get 和一個(gè)set方法，當(dāng)數(shù)據(jù)變化時(shí)，調(diào)用 set 方法。下面我們通過(guò)計(jì)算屬性的 getter/setter 方法來(lái)實(shí)現(xiàn)對(duì)屬性數(shù)據(jù)的顯示和監(jiān)視，即雙向綁定。

computed: { fullName: {get() { //讀取當(dāng)前屬性值的回調(diào)，根據(jù)相關(guān)的數(shù)據(jù)計(jì)算并返回當(dāng)前屬性的值 return this.firstName + ’ ’ + this.lastName},set(val) { // 當(dāng)屬性值發(fā)生改變時(shí)回調(diào)，更新相關(guān)的屬性數(shù)據(jù)，val就是fullName的最新屬性值 const names = val ? val.split(’ ’) : []; this.firstName = names[0] this.lastName = names[1]} }}watch 監(jiān)聽(tīng)屬性

通過(guò) vm 對(duì)象的 $watch() 或 watch 配置來(lái)監(jiān)聽(tīng) Vue 實(shí)例上的屬性變化，或某些特定數(shù)據(jù)的變化，然后執(zhí)行某些具體的業(yè)務(wù)邏輯操作。當(dāng)屬性變化時(shí)，回調(diào)函數(shù)自動(dòng)調(diào)用，在函數(shù)內(nèi)部進(jìn)行計(jì)算。其可以監(jiān)聽(tīng)的數(shù)據(jù)來(lái)源：data，props，computed 內(nèi)的數(shù)據(jù)。

以上示例通過(guò) watch 來(lái)實(shí)現(xiàn)：

watch: { // 監(jiān)聽(tīng) data 中的 firstName，如果發(fā)生了變化，就把變化的值給 data 中的 fullName， val 就是 firstName 的最新值 firstName: function(val) { this.fullName = val + ’ ’ + this.lastName }, lastName: function(val) {this.fullName = this.firstName + ’ ’ + val } }// 由上可以看出 watch 要監(jiān)聽(tīng)兩個(gè)數(shù)據(jù)，而且代碼是同類(lèi)型的重復(fù)的，所以相比用 computed 更簡(jiǎn)潔

注：監(jiān)聽(tīng)函數(shù)有兩個(gè)參數(shù)，第一個(gè)參數(shù)是最新的值，第二個(gè)參數(shù)是輸入之前的值，順序一定是新值，舊值，如果只寫(xiě)一個(gè)參數(shù)，那就是最新屬性值。

在使用時(shí)選擇 watch 還是 computed，還有一個(gè)參考點(diǎn)就是官網(wǎng)說(shuō)的：當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷(xiāo)較大的操作時(shí)，watch方式是最有用的。所以 watch 一定是支持異步的。

上面僅限監(jiān)聽(tīng)簡(jiǎn)單數(shù)據(jù)類(lèi)型，監(jiān)聽(tīng)復(fù)雜數(shù)據(jù)類(lèi)型就需要用到深度監(jiān)聽(tīng) deep。

deep：為了發(fā)現(xiàn)對(duì)象內(nèi)部值的變化，可以在選項(xiàng)參數(shù)中指定 deep: true。注意監(jiān)聽(tīng)數(shù)組的變更不需要這么做。

data: { fullName: {firstName: ’David’,lastName: ’Beckham’ }},watch: { fullName: {handler(newVal, oldVal) { console.log(newVal); console.log(oldVal);},deep: true }}

以上打印結(jié)果：

打印出來(lái)的 newVal 和 oldVal 值是一樣的，所以深度監(jiān)聽(tīng)雖然可以監(jiān)聽(tīng)到對(duì)象的變化，但是無(wú)法監(jiān)聽(tīng)到對(duì)象里面哪個(gè)具體屬性的變化。這是因?yàn)樗鼈兊囊弥赶蛲粋€(gè)對(duì)象/數(shù)組。Vue 不會(huì)保留變更之前值的副本。[ vm.$watch 深度監(jiān)聽(tīng) ]

若果要監(jiān)聽(tīng)對(duì)象的單個(gè)屬性的變化，有兩種方法：

1. 直接監(jiān)聽(tīng)對(duì)象的屬性

watch:{ fullName.firstName: function(newVal,oldVal){console.log(newVal,oldVal); }}

2. 與 computed 屬性配合使用，computed 返回想要監(jiān)聽(tīng)的屬性值，watch 用來(lái)監(jiān)聽(tīng)

computed: { firstNameChange() { return this.fullName.firstName }},watch: { firstNameChange() {console.log(this.fullName) }}總結(jié)

watch和computed都是以Vue的依賴(lài)追蹤機(jī)制為基礎(chǔ)的，當(dāng)某一個(gè)依賴(lài)型數(shù)據(jù)（依賴(lài)型數(shù)據(jù)：簡(jiǎn)單理解即放在 data 等對(duì)象下的實(shí)例數(shù)據(jù)）發(fā)生變化的時(shí)候，所有依賴(lài)這個(gè)數(shù)據(jù)的相關(guān)數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化，即自動(dòng)調(diào)用相關(guān)的函數(shù)，來(lái)實(shí)現(xiàn)數(shù)據(jù)的變動(dòng)。

當(dāng)依賴(lài)的值變化時(shí)，在watch中，是可以做一些復(fù)雜的操作的，而computed中的依賴(lài)，僅僅是一個(gè)值依賴(lài)于另一個(gè)值，是值上的依賴(lài)。

應(yīng)用場(chǎng)景：

computed：用于處理復(fù)雜的邏輯運(yùn)算；一個(gè)數(shù)據(jù)受一個(gè)或多個(gè)數(shù)據(jù)影響；用來(lái)處理watch和methods無(wú)法處理的，或處理起來(lái)不方便的情況。例如處理模板中的復(fù)雜表達(dá)式、購(gòu)物車(chē)?yán)锩娴纳唐窋?shù)量和總金額之間的變化關(guān)系等。

watch：用來(lái)處理當(dāng)一個(gè)屬性發(fā)生變化時(shí)，需要執(zhí)行某些具體的業(yè)務(wù)邏輯操作，或要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷(xiāo)較大的操作；一個(gè)數(shù)據(jù)改變影響多個(gè)數(shù)據(jù)。例如用來(lái)監(jiān)控路由、inpurt 輸入框值的特殊處理等。

區(qū)別：

computed

初始化顯示或者相關(guān)的 data、props 等屬性數(shù)據(jù)發(fā)生變化的時(shí)候調(diào)用； 計(jì)算屬性不在 data 中，它是基于data 或 props 中的數(shù)據(jù)通過(guò)計(jì)算得到的一個(gè)新值，這個(gè)新值根據(jù)已知值的變化而變化； 在 computed 屬性對(duì)象中定義計(jì)算屬性的方法，和取data對(duì)象里的數(shù)據(jù)屬性一樣，以屬性訪問(wèn)的形式調(diào)用； 如果 computed 屬性值是函數(shù)，那么默認(rèn)會(huì)走 get 方法，必須要有一個(gè)返回值，函數(shù)的返回值就是屬性的屬性值； computed 屬性值默認(rèn)會(huì)緩存計(jì)算結(jié)果，在重復(fù)的調(diào)用中，只要依賴(lài)數(shù)據(jù)不變，直接取緩存中的計(jì)算結(jié)果，只有依賴(lài)型數(shù)據(jù)發(fā)生改變，computed 才會(huì)重新計(jì)算； 在computed中的，屬性都有一個(gè) get 和一個(gè) set 方法，當(dāng)數(shù)據(jù)變化時(shí)，調(diào)用 set 方法。

watch

主要用來(lái)監(jiān)聽(tīng)某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作，可以看作是 computed 和 methods 的結(jié)合體； 可以監(jiān)聽(tīng)的數(shù)據(jù)來(lái)源：data，props，computed內(nèi)的數(shù)據(jù)； watch支持異步； 不支持緩存，監(jiān)聽(tīng)的數(shù)據(jù)改變，直接會(huì)觸發(fā)相應(yīng)的操作； 監(jiān)聽(tīng)函數(shù)有兩個(gè)參數(shù)，第一個(gè)參數(shù)是最新的值，第二個(gè)參數(shù)是輸入之前的值，順序一定是新值，舊值。

以上就是如何理解Vue中computed和watch的區(qū)別的詳細(xì)內(nèi)容，更多關(guān)于Vue的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！