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

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

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

前言

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

用watch監(jiān)聽

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

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

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

2、在函數內部，可以根據newValue來修改其他屬性（這里將totalMoney修改為newValue * 100）。

深度監(jiān)聽

上述的方法，適合監(jiān)聽簡單的熟悉感，如果要監(jiān)聽的屬性是一個對象或者是一個數組，并且需要監(jiān)聽對象內部屬性的變化，要使用上述的方法就無法實現(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)聽對象內部的所有屬性變化，可以考慮使用淺拷貝等方式來手動比較對象的變化。

使用計算屬性

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

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

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

watch主要用于在屬性變化時執(zhí)行一些副作用，比如異步操作、修改多個屬性等。計算屬性主要用于根據已有數據生成新的數據，并且具有緩存機制，只有當依賴的屬性發(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í)行傳入的函數，并自動追蹤函數中使用的響應式數據（這里是buyCount）。當這些響應式數據變化時，函數會再次執(zhí)行。這樣就可以根據buyCount的變化動態(tài)修改totalMoney的值。