vue3如何監(jiān)視Reactive對象中的屬性
更新時間：2026年01月23日 15:49:37 作者：裊沫
文章介紹了Vue.js中的`watch`函數(shù),它可以監(jiān)聽不同的數(shù)據(jù)源類型,包括ref、響應式對象、getter函數(shù)和數(shù)組,文章詳細說明了如何監(jiān)聽單個數(shù)據(jù)的屬性值和多個屬性值,并強調(diào)了使用getter函數(shù)的重要性,此外,還提到了深度偵聽的注意事項
vue3監(jiān)視Reactive對象中的屬性
watch 的第一個參數(shù)可以是不同形式的“數(shù)據(jù)源”：它可以是一個 ref (包括計算屬性)、一個響應式對象、一個 getter 函數(shù)、或多個數(shù)據(jù)源組成的數(shù)組
框架
<template>
<div class="divBox">
<h2>姓名：{{ person.name }}</h2>
<h2>年齡：{{ person.age }}</h2>
<h2>汽車：{{ person.car.brand1 }} 、 {{ person.car.brand2 }}</h2>
<button @click="changeName">修改姓名</button>
<button @click="changeAge">修改年齡</button>
<button @click="changeCarName">修改汽車名稱</button>
<button @click="changeCarPrice">修改汽車價格</button>
<button @click="changeCar">修改汽車</button>
</div>
</template>數(shù)據(jù)源
<script setup name="watchReactive">
import { ref, reactive, watch } from "vue";
const person = reactive({
name: "張三",
age: 18,
car: { brand1: "奔馳", brand2: "奧迪", price: 100000 },
});
function changeName() {
person.name = person.name + "~";
}
function changeAge() {
person.age = person.age + 1;
}
function changeCarName() {
person.car.brand1 = person.car.brand1 + "~";
}
function changeCarPrice() {
person.car.brand2 = person.car.brand2 + "$";
}
function changeCar() {
person.car = { brand1: "愛瑪電動車", brand2: "小刀就是好", price: 88888 };
}
</script>
數(shù)據(jù)、方法
監(jiān)聽（Watch）
單個數(shù)據(jù)的屬性值
可以使用以下方式：
1.數(shù)據(jù)為String/number屬性值
<script setup name="watchReactive">
//現(xiàn)在開始進行監(jiān)視,不能監(jiān)視對象的屬性，只是一個字符串
// watch(person.name,(newValue,oldValue) => {
// console.log("newValue",newValue);
// console.log("oldValue",oldValue);
// });
//成功監(jiān)視！
watch(()=>{return person.name},(newValue,oldValue) => {
console.log("newValue",newValue);
console.log("oldValue",oldValue);
});
//推薦指數(shù)****
watch(()=> person.name,(newValue,oldValue) => {
console.log("newValue",newValue);
console.log("oldValue",oldValue);
});
</script>
2.監(jiān)聽的數(shù)據(jù)為Object對象時
當我們監(jiān)聽函數(shù)中的對象時：
<script setup name="watchReactive">
//不能使用這種方式進行監(jiān)視，他只是一個字符串
watch(person.car.brand1,(newValue,oldValue) =>{
console.log("newValue",newValue);
console.log("oldValue",oldValue);
})
<script/>系統(tǒng)提示：
<script setup name="watchReactive">
/**可以使用這種方式進行監(jiān)視，
* 但是只能監(jiān)視對象中的屬性，不能監(jiān)視對象本身
* 對象本身，已經(jīng)不是響應式的對象了，被重新賦值了
*/
watch(person.car,(newValue,oldValue) =>{
console.log("newValue",newValue);
console.log("oldValue",oldValue);
})
<script/>以下這種方式，我們只能監(jiān)視數(shù)據(jù)對象整體，并不能監(jiān)視到數(shù)據(jù)對象中的屬性?。?！
<script setup name="watchReactive">
//我們嘗試監(jiān)聽數(shù)據(jù)中的對象屬性
watch(()=> person.car,(newValue,oldValue) =>{
console.log("newValue",newValue);
console.log("oldValue",oldValue);
})
</script>
上面雖然可以監(jiān)視數(shù)據(jù)中的對象屬性，但是并不是最優(yōu)的，因為其并不能監(jiān)視對象本身本修改的情況，下面是推薦使用的監(jiān)聽方式 ，既可以監(jiān)聽到對象中的屬性，又可以監(jiān)聽到數(shù)據(jù)本身
<script setup name="watchReactive">
//推薦程度*******
watch(()=> person.car,(newValue,oldValue) =>{
console.log("newValue",newValue);
console.log("oldValue",oldValue);
},{deep:true})
</script>
監(jiān)聽單個數(shù)據(jù)的多個屬性值
當我們進行監(jiān)聽數(shù)據(jù)的多個屬性值時：
我們可以整體返回一個對象數(shù)組，用來監(jiān)聽不同的數(shù)據(jù)類型：
<script setup name="watchReactive">
/**
* 監(jiān)視對象內(nèi)部多個屬性
*/
// watch(()=>{return [person.name,person.car.brand1]},(newValue,oldValue) =>{
// console.log("newValue",newValue);
// console.log("oldValue",oldValue);
// },{deep:true})
watch(()=>[person.name,person.car.brand1],(newValue,oldValue) =>{
console.log("newValue",newValue);
console.log("oldValue",oldValue);
},{deep:true})
</script>
也可以這樣書寫：
<script setup name="watchReactive">
//推薦程度*******
watch([() => person.name, () => person.car.brand1],
(newValue, oldValue) => {
console.log("newValue", newValue);
console.log("oldValue", oldValue);
},{ deep: true });
</script>好處在于，我們可以針對沒個屬性進行監(jiān)視！?。?/p>
vue3官方文檔
偵聽數(shù)據(jù)源類型?
watch 的第一個參數(shù)可以是不同形式的“數(shù)據(jù)源”：它可以是一個 ref (包括計算屬性)、一個響應式對象、一個 getter 函數(shù)、或多個數(shù)據(jù)源組成的數(shù)組：
const x = ref(0)
const y = ref(0)
// 單個 ref
watch(x, (newX) => {
console.log(`x is ${newX}`)
})
// getter 函數(shù)
watch(
() => x.value + y.value,
(sum) => {
console.log(`sum of x + y is: ${sum}`)
}
)
// 多個來源組成的數(shù)組
watch([x, () => y.value], ([newX, newY]) => {
console.log(`x is ${newX} and y is ${newY}`)
})注意，你不能直接偵聽響應式對象的屬性值，例如:
const obj = reactive({ count: 0 })
// 錯誤，因為 watch() 得到的參數(shù)是一個 number
watch(obj.count, (count) => {
console.log(`Count is: ${count}`)
})這里需要用一個返回該屬性的 getter 函數(shù)：
// 提供一個 getter 函數(shù)
watch(
() => obj.count,
(count) => {
console.log(`Count is: ${count}`)
}
)deep謹慎使用
深度偵聽需要遍歷被偵聽對象中的所有嵌套的屬性，當用于大型數(shù)據(jù)結構時，開銷很大。因此請只在必要時才使用它，并且要留意性能。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue項目導入導出文件功能以及導出文件后亂碼問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
對于瀏覽器來說,文本、圖片等可以直接打開的文件,不會進行自動下載,下面這篇文章主要給大家介紹了關于Vue實現(xiàn)下載文件而非瀏覽器直接打開的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
防抖節(jié)流就是使用定時器 來實現(xiàn)我們的目的。這篇文章通過實例代碼給大家介紹vue防抖與節(jié)流的使用，感興趣的朋友跟隨小編一起看看吧2019-11-11
這篇文章主要介紹了axios全局路由攔截的設置方法,axios全局路由代碼通常是在構建axios實例注入的，本文通過實例代碼介紹的非常詳細，需要的朋友可以參考下2023-09-09
淺談vue-props的default寫不寫有什么區(qū)別
這篇文章主要介紹了淺談vue-props的default寫不寫有什么區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構建用戶界面的 漸進式框架。本文給大家介紹Vue.js開發(fā)環(huán)境搭建的詳解講解，感興趣的朋友一起看看吧2016-11-11
這篇文章主要介紹了Vue和React組件之間的傳值方式詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家介紹了推薦一款簡易的solid-js消息UI庫使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
當構建的項目比較大的時候,懶加載可以分割代碼塊,提高頁面的初始加載效率解決白屏問題,下面是幾種常見vue路由懶加載的方法,感興趣的朋友跟隨小編一起看看吧2023-11-11
VuePress 靜態(tài)網(wǎng)站生成方法步驟
這篇文章主要介紹了VuePress 靜態(tài)網(wǎng)站生成方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02