快捷導(dǎo)航

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

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

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

前言

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

用watch監(jiān)聽

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

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

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

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

深度監(jiān)聽

上述的方法，適合監(jiān)聽簡(jiǎn)單的熟悉感，如果要監(jiān)聽的屬性是一個(gè)對(duì)象或者是一個(gè)數(shù)組，并且需要監(jiān)聽對(duì)象內(nèi)部屬性的變化，要使用上述的方法就無法實(shí)現(xiàn)我們的需求。此時(shí)就需要使用深度監(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)聽會(huì)帶來一定的性能開銷，因?yàn)樗鼤?huì)遞歸地檢查對(duì)象的每一個(gè)屬性。如果不需要監(jiān)聽對(duì)象內(nèi)部的所有屬性變化，可以考慮使用淺拷貝等方式來手動(dòng)比較對(duì)象的變化。

使用計(jì)算屬性

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

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

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

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

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

在Vue 3的組合式API中，可以使用watchEffect來實(shí)現(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會(huì)立即執(zhí)行傳入的函數(shù)，并自動(dòng)追蹤函數(shù)中使用的響應(yīng)式數(shù)據(jù)（這里是buyCount）。當(dāng)這些響應(yīng)式數(shù)據(jù)變化時(shí)，函數(shù)會(huì)再次執(zhí)行。這樣就可以根據(jù)buyCount的變化動(dòng)態(tài)修改totalMoney的值。