快捷導(dǎo)航

vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化詳解

更新時間：2024年12月30日 09:19:45 作者：小鴨呱呱呱

這篇文章主要給大家介紹了關(guān)于vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化,在Vue.js中可以通過watch監(jiān)聽屬性變化并動態(tài)修改其他屬性的值,watch通過監(jiān)聽器函數(shù)接收新舊值,實現(xiàn)屬性間的數(shù)據(jù)聯(lián)動,需要的朋友可以參考下

前言

在vue.js中監(jiān)聽某個屬性的改變，動態(tài)的去修改另外屬性的值，這是非常常見的業(yè)務(wù)場景。例如在一個購物車中，根據(jù)用戶添加的商品數(shù)量，動態(tài)修改頁面顯示的訂單總金額。要實現(xiàn)這樣的功能，主要有兩種方法可以實現(xiàn)，一種是使用watch監(jiān)聽，另外一種是使用computed計算屬性。

用watch監(jiān)聽

在Vue組件中，可以使用watch選項來監(jiān)聽數(shù)據(jù)的變化。假設(shè)你有一個data中的屬性sourceProp，當(dāng)它變化時，你想修改另一個屬性targetProp的值。

export default {
   data() {
       return {
           totalMoney: 0.00,
           buyCount: 1
       };
   },
   watch: {
       buyCount(newValue, oldValue) {
           // 當(dāng)buyCount變化時，修改totalMoney的值，這里的100是單個商品的金額
           this.totalMoney = newValue * 100;
       }
   }
};

1、watch選項是一個對象，其中的鍵是要監(jiān)聽的數(shù)據(jù)屬性名（這里是buyCount），值是一個函數(shù)。這個函數(shù)接收兩個參數(shù)，newValue是屬性變化后的新值，oldValue是變化前的值。

2、在函數(shù)內(nèi)部，可以根據(jù)newValue來修改其他屬性（這里將totalMoney修改為newValue * 100）。

深度監(jiān)聽

上述的方法，適合監(jiān)聽簡單的熟悉感，如果要監(jiān)聽的屬性是一個對象或者是一個數(shù)組，并且需要監(jiān)聽對象內(nèi)部屬性的變化，要使用上述的方法就無法實現(xiàn)我們的需求。此時就需要使用深度監(jiān)聽。

export default {
   data() {
       return {
           goodsInfo: {
               price: 100.00,
               buyCount: 1
           },
           orderTotalMoney: 0.00
       };
   },
   watch: {
       goodsInfo: {
           handler(newValue, oldValue) {
               this.orderTotalMoney = goodsInfo.buyCount * goodsInfo.price;
           },
           deep: true// 開啟深度監(jiān)聽
       }
   }
};

深度監(jiān)聽會帶來一定的性能開銷，因為它會遞歸地檢查對象的每一個屬性。如果不需要監(jiān)聽對象內(nèi)部的所有屬性變化，可以考慮使用淺拷貝等方式來手動比較對象的變化。

使用計算屬性

計算屬性可以根據(jù)其他數(shù)據(jù)屬性自動計算并返回一個新的值，并且會自動緩存結(jié)果。雖然它不是直接監(jiān)聽屬性變化，但可以達到類似的效果。

export default {
   data() {
       return {
           totalMoney: 0.00,
           buyCount: 1
       };
   },
   computed: {
       totalMoney() {
           return this.totalMoney * 100;
       }
   }
};

watch和計算屬性的區(qū)別

watch主要用于在屬性變化時執(zhí)行一些副作用，比如異步操作、修改多個屬性等。計算屬性主要用于根據(jù)已有數(shù)據(jù)生成新的數(shù)據(jù)，并且具有緩存機制，只有當(dāng)依賴的屬性發(fā)生變化時才會重新計算。

在Vue 3中使用watchEffect（組合式API）

在Vue 3的組合式API中，可以使用watchEffect來實現(xiàn)屬性變化的監(jiān)聽。

import {ref, watchEffect} from 'vue';
export default {
    setup() {
        const totalMoney = ref(0);
        const buyCount = ref(0);
        watchEffect(() => {
            totalMoney.value = buyCount.value * 100;
        });
        return {
            totalMoney: 0.00,
            buyCount: 1
        };
    }
};

watchEffect會立即執(zhí)行傳入的函數(shù)，并自動追蹤函數(shù)中使用的響應(yīng)式數(shù)據(jù)（這里是buyCount）。當(dāng)這些響應(yīng)式數(shù)據(jù)變化時，函數(shù)會再次執(zhí)行。這樣就可以根據(jù)buyCount的變化動態(tài)修改totalMoney的值。