vue的computed方法

vue.js的computed方法

計(jì)算屬性是基于它們的依賴進(jìn)行緩存的，只在相關(guān)依賴發(fā)生改變時(shí)它們才會(huì)重新求值。

用 methods 也可以實(shí)現(xiàn)同樣的效果，但 methods 在重新渲染的時(shí)候會(huì)重新調(diào)用執(zhí)行，在性能上 computed 優(yōu)于 methods，當(dāng)不需要緩存時(shí)可用 methods。

computed回調(diào)函數(shù)域中的回調(diào)函數(shù)方法可以在插值表達(dá)式{{}}中直接獲取返回結(jié)果而無(wú)需在data數(shù)據(jù)域中定義相關(guān)的屬性，這一點(diǎn)相較于watch中而言使用起來(lái)也更方便些。

get

一般情況下，我們只是使用了computer中的gettter屬性，默認(rèn)只有 getter，我們只是單純的使用了gettter屬性。

set

只有當(dāng)computed監(jiān)測(cè)的值變化的時(shí)候，set才回被調(diào)用。

computed中g(shù)et和set的栗子（引用官網(wǎng)）

        var vm = new Vue({
        data: { a: 1 },
        computed: {
            // 僅讀取
            aDouble: function () {
            return this.a * 2
            },
            // 讀取和設(shè)置
            aPlus: {
                // 頁(yè)面初始化時(shí)會(huì)先執(zhí)行一次 get 好比與computed的getter屬性
                // 監(jiān)視 data 中 a 的屬性值，只有發(fā)生改變時(shí)，它們才會(huì)重新求值，否則取緩存中的
            get: function () {      
                console.log('調(diào)用了getter屬性')
                return this.a + 1
            },
            // 監(jiān)視當(dāng)前屬性值的變化，當(dāng)屬性值發(fā)生變化時(shí)執(zhí)行，
            // 更新相關(guān)的屬性數(shù)據(jù)，類似于 watch 的功能
            set: function (newValue) {
            console.log('調(diào)用了settter屬性')
            console.log(newValue,'newValue');
                    this.a = newValue - 1
                }
            }
        }
        })
        vm.aPlus   // => 2
        console.log(vm.aPlus,'第一次執(zhí)行的vm.aPlus');
        // DOM 還沒(méi)更新
        console.log(vm.a,'第一次vm.a');
        // 當(dāng)監(jiān)聽(tīng)到值變化時(shí) 執(zhí)行set
        vm.aPlus = 4
        console.log(vm.aPlus,'第二次執(zhí)行的vm.aPlus');
        console.log(vm.a,'第二次vm.a');
        // vm.$nextTick方法 將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。
        // 在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。
        // 它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的this自動(dòng)綁定到調(diào)用它的實(shí)例上。
        vm.$nextTick(function () {
        // DOM 現(xiàn)在更新了
            console.log(vm.a,'this.vm.a');
        })
        // 更新后data中a為3
        vm.aDouble // => 6
        console.log(vm.a,'vm.aDouble中的a',vm.aDouble,'vm.aDouble');

可以看打印結(jié)果

watch 方法

1.通過(guò)  watch  監(jiān)聽(tīng)  data  數(shù)據(jù)的變化，數(shù)據(jù)發(fā)生變化時(shí)，就會(huì)打印當(dāng)前的值 

watch: {
    data(val, value) {
        console.log(val)
        console.log(value)
    }
}

2.通過(guò)  watch  監(jiān)聽(tīng)  list  數(shù)據(jù)的變化，數(shù)據(jù)發(fā)生變化時(shí)，this.number++（使用深度監(jiān)聽(tīng)）

data（） {
    return {
        list: {
            'id': 1,
            'type': 0
        },
        number: 0
    }
},
watch: {
    list: {
        handler(newVal) {
            this.number++
        },
        deep: true
    }
}

3.  通過(guò)  watch  監(jiān)聽(tīng)  data  數(shù)據(jù)的變化，數(shù)據(jù)發(fā)生變化時(shí),執(zhí)行 change 方法

watch: {
    data： 'change' // 值可以為methods的方法名
}，
methods: {
    change(curVal,oldVal){
　　　console.log(curVal,oldVal)
　 }
}

watch中的immediate、handler和deep屬性

1.  immediate    和   handler

這樣使用watch時(shí)有一個(gè)特點(diǎn)，就是當(dāng)值第一次綁定時(shí)，不會(huì)執(zhí)行監(jiān)聽(tīng)函數(shù)，只有值發(fā)生改變時(shí)才會(huì)執(zhí)行。如果我們需要在最初綁定值的時(shí)候也執(zhí)行函數(shù)，則就需要用到immediate屬性。

data（） {
    return {
        list: {
            'id': 1,
            'type': 0
        },
        number: 0
    }
}，
watch: {
    list: {
        handler(newVal) {
            this.number++
        },
        immediate: true
    }
}

2.  deep

當(dāng)需要監(jiān)聽(tīng)一個(gè)對(duì)象的改變時(shí)，普通的watch方法無(wú)法監(jiān)聽(tīng)到對(duì)象內(nèi)部屬性的改變，此時(shí)就需要deep屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽(tīng)。

data（） {
    return {
        list: {
            'id': 1,
            'type': 0
        },
        number: 0
    }
}，
watch: {
    list: {
        handler(newVal) {
            this.number++
        },
        deep: true
    }    
}

設(shè)置deep:true則可以監(jiān)聽(tīng)到   list.id  的變化，此時(shí)會(huì)給 list  的所有屬性都加上這個(gè)監(jiān)聽(tīng)器，當(dāng)對(duì)象屬性較多時(shí)，每個(gè)屬性值的變化都會(huì)執(zhí)行   handler。

如果只需要監(jiān)聽(tīng)對(duì)象中的一個(gè)屬性值，則可以做以下優(yōu)化：使用字符串的形式監(jiān)聽(tīng)對(duì)象屬性：

data（） {
    return {
        list: {
            'id': 1,
            'type': 0
        }
    }
}，
watch: {
    'list.id': {
        handler(newVal, oldVal) {
             ......
        },
    deep: true
    }    
}

結(jié)論：數(shù)組（一維、多維）的變化不需要通過(guò)深度監(jiān)聽(tīng)，對(duì)象數(shù)組中對(duì)象的屬性變化則需要deep深度監(jiān)聽(tīng)。

computed與watch的區(qū)別

computed與watch的不同點(diǎn)

觸發(fā)條件不同

• computed計(jì)算屬性會(huì)依賴于使用它的data屬性，只要是依賴的data屬性值有變動(dòng)，則自定義重新調(diào)用計(jì)算屬性執(zhí)行一次。 
• watch則是在監(jiān)控的data屬性值發(fā)生變動(dòng)時(shí)，其會(huì)自動(dòng)調(diào)用watch回調(diào)函數(shù)。

執(zhí)行速度不同

• computed計(jì)算屬性的值是直接從緩存中獲取，而不是重新編譯執(zhí)行一次，因而其性能要高一些，尤其是在data屬性中的值無(wú)變化，而重復(fù)調(diào)用computed回調(diào)函數(shù)時(shí)更是如此，所以說(shuō)在Vue中，應(yīng)該盡可能的多使用computed替代watch。
• watch中的值需要data屬性重新編譯執(zhí)行，因而其性能方面會(huì)有所損失。

使用方式不同

• computed計(jì)算屬性的回調(diào)函數(shù)方法可以直接在頁(yè)面中通過(guò)插值表達(dá)式——{{}}來(lái)獲取。此時(shí)我們不需要再data數(shù)據(jù)域中再定義一個(gè)與方法名相同的屬性。
• watch中的方法名必須是data數(shù)據(jù)域中所存在的，否則無(wú)法使用。

相同點(diǎn)

都可以實(shí)現(xiàn)通過(guò)監(jiān)控data數(shù)據(jù)域中屬性值的變化來(lái)觸發(fā)相應(yīng)的回調(diào)函數(shù)，進(jìn)而實(shí)現(xiàn)我們特殊的邏輯業(yè)務(wù)處理功能。 

項(xiàng)目中的使用總結(jié)

1.在methods中，對(duì)于data中在視圖中需要的任一個(gè)數(shù)據(jù)發(fā)生變化，都會(huì)重新更新視圖，不會(huì)緩存數(shù)據(jù)。

2.在computed中，計(jì)算過(guò)后會(huì)有緩存結(jié)果，下次調(diào)用時(shí)候，直接取緩存的結(jié)果，除非所依賴的響應(yīng)式數(shù)據(jù)發(fā)生變化才會(huì)再次執(zhí)行，計(jì)算內(nèi)部一定有return。（在用的時(shí)候直接寫(xiě)函數(shù)名字）

當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候就需要用到computed 最典型的栗子：購(gòu)物車商品結(jié)算的時(shí)候

3.監(jiān)聽(tīng)指定的響應(yīng)式數(shù)據(jù)發(fā)生變化，如果有變化會(huì)重新調(diào)用。

當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候就需要用watch  栗子：搜索數(shù)據(jù)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論