快捷導(dǎo)航

Vue中computed和watch的區(qū)別小結(jié)

更新時(shí)間：2022年12月10日 11:13:01 作者：夢之歸途

watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的,當(dāng)某一個(gè)依賴型數(shù)據(jù)發(fā)生變化的時(shí)候,所有依賴這個(gè)數(shù)據(jù)的相關(guān)數(shù)據(jù)會自動發(fā)生變化,即自動調(diào)用相關(guān)的函數(shù),來實(shí)現(xiàn)數(shù)據(jù)的變動，這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧

區(qū)別：計(jì)算屬性computed支持緩存，只有依賴數(shù)據(jù)發(fā)生改變，才會重新進(jìn)行計(jì)算；不支持異步，當(dāng)computed內(nèi)有異步操作時(shí)無效，無法監(jiān)聽數(shù)據(jù)的變化。而監(jiān)聽屬性watch不支持緩存，數(shù)據(jù)變，直接會觸發(fā)相應(yīng)的操作；支持異步。

一、Vue中computed和watch的區(qū)別

watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的，它們都試圖處理這樣一件事情：當(dāng)某一個(gè)或多個(gè)數(shù)據(jù)（稱它們?yōu)橐蕾嚁?shù)據(jù)）發(fā)生變化的時(shí)候，所有依賴這些數(shù)據(jù)的 “相關(guān)” 數(shù)據(jù) “自動” 發(fā)生變化，也就是自動調(diào)用相關(guān)的函數(shù)去實(shí)現(xiàn)數(shù)據(jù)的變動。

二、computed計(jì)算屬性

支持緩存，只有依賴數(shù)據(jù)發(fā)生改變，才會重新進(jìn)行計(jì)算；如果函數(shù)所依賴的屬性沒有發(fā)生變化，從緩存中讀取
必須有return返回
使用方法和data中的數(shù)據(jù)一樣，但是類似一個(gè)執(zhí)行方法
不支持異步，當(dāng)computed內(nèi)有異步操作時(shí)無效，無法監(jiān)聽數(shù)據(jù)的變化；

computed是計(jì)算屬性，也就是依賴某個(gè)值或者props通過計(jì)算得來的數(shù)據(jù)

computed的值是在getter執(zhí)行之后進(jìn)行緩存的，只有在它依賴的數(shù)據(jù)發(fā)生變化（依賴的數(shù)據(jù)可以是單個(gè)，也可以是多個(gè)）時(shí)，會重新調(diào)用getter來計(jì)算；

注意：就算data中沒有直接聲明要計(jì)算的變量，也可以直接在computed中寫入，如下示例：

<p id="app">  {{fullName}}  </p>
 
<script>
    var vm = new Vue({  
        el: '#app',  
        data: {  
            firstName: 'Foo',  
            lastName: 'Bar',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    })
</script>

計(jì)算屬性默認(rèn)只有g(shù)etter，可以在需要的時(shí)候自己設(shè)定setter（所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實(shí)例）：

computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
   }
    
//這個(gè)時(shí)候在控制臺直接運(yùn)行【vm.fullName = ‘bibi wang'】，相應(yīng)的firstName和lastName也會改變。

（2）watch
1、不支持緩存，數(shù)據(jù)變，直接會觸發(fā)相應(yīng)的操作；

2、支持異步操作；

3、watch是監(jiān)聽器，可以監(jiān)聽某一個(gè)數(shù)據(jù)，然后執(zhí)行相應(yīng)的操作；

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

5、watch的函數(shù)名必須和data中的數(shù)據(jù)名一致

6、watch中的函數(shù)有倆個(gè)參數(shù)，新舊

7、watch中的函數(shù)是不需要調(diào)用的

8、只會監(jiān)聽數(shù)據(jù)的值是否發(fā)生改變，而不會去監(jiān)聽數(shù)據(jù)的地址是否發(fā)生改變，要深度監(jiān)聽需要配合deep：true屬性使用

9、immediate:true 頁面首次加載的時(shí)候做一次監(jiān)聽

var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (newVal,oldVal) {
                this.fullName = newVal + ' ' + this.lastName
                console.log(newVal+'========='+oldVal)//Fooaaaa=========Foo
            },
            lastName: function (newVal,oldVal) {
                this.fullName = this.firstName + ' ' + newVal
                console.log(newVal+'========='+oldVal)//Baraaaa=========Bar
            }
        }
    })

注意：如果data中沒有相應(yīng)的屬性的話，是不能watch的，這點(diǎn)和computed不一樣。