Vue3中watch監(jiān)聽的五種情況詳解
更新時間：2024年03月25日 10:12:46 作者：扶蘇1002
watch函數(shù)用于偵聽某個值的變化,當(dāng)該值發(fā)生改變后,觸發(fā)對應(yīng)的處理邏輯,本文將給大家介紹了Vue3中watch監(jiān)聽的五種情況,文中通過代碼示例講解的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下
一、watch
1.1. 監(jiān)聽ref定義的基本類型數(shù)據(jù)
監(jiān)視
ref定義的【基本類型】數(shù)據(jù)：直接寫數(shù)據(jù)名即可，監(jiān)視的是其value值的改變。
1.1.1. 單個監(jiān)聽
let num = ref(1);
watch(num, (newValue, oldValue) => {
console.log(newValue, oldValue);
});
1.1.2. 多個監(jiān)聽
import { ref, watch } from "vue";
let num1 = ref(1);
let num2 = ref(2);
watch([num1, num2], ([newNum1, newNum2], [oldNum1, oldNum2]) => {
console.log(newNum1, newNum2, oldNum1, oldNum2);
});
1.2. 監(jiān)聽ref定義的對象類型數(shù)據(jù)
監(jiān)視ref定義的【對象類型】數(shù)據(jù)：直接寫數(shù)據(jù)名
注意：
- 監(jiān)視的是對象的【地址值】，若想監(jiān)視對象內(nèi)部的屬性，需要手動開啟深度監(jiān)視。
- 若修改的是ref定義的對象中的屬性，因為它們是同一個對象（內(nèi)存地址不變），所以newValue 和 oldValue 都是新值。
- 若修改整個ref定義的對象，newValue 是新值， oldValue 是舊值，因為不是同一個對象了。
<script setup>
import { ref, watch } from "vue";
let person = ref({
name: "zs",
age: 13,
});
function updateName() {
person.value.name += "~";
}
function updatePerson() {
person.value = {
name: "ls",
age: 18,
};
}
watch(
person,
(newValue, oldValue) => {
console.log(newValue, oldValue);
},
{
deep: true,
}
);
</script>
<template>
<h1>姓名: {{ person.name }}</h1>
<h1>年齡: {{ person.age }}</h1>
<button @click="updateName">修改姓名</button>
<button @click="updatePerson">修改整個人</button>
</template>
1.3. 監(jiān)聽reactive定義的對象類型數(shù)據(jù)
reactive不能定義基本類型數(shù)據(jù)
監(jiān)視reactive定義的【對象類型】數(shù)據(jù)，且默認(rèn)開啟了深度監(jiān)視，并且是不可關(guān)閉的深度監(jiān)聽。數(shù)據(jù)中的任何一點蛛絲馬跡的變化，都會被監(jiān)聽到。
<script setup>
// 監(jiān)視`reactive`定義的【對象類型】數(shù)據(jù)，且默認(rèn)開啟了深度監(jiān)視。
import { reactive, watch } from "vue";
let person = reactive({
name: "zs",
age: 18,
car: {
c1: "c1",
c2: "c2",
},
});
function updateName() {
person.name += "~";
}
function updatePerson() {
person = Object.assign(person, {
name: "lisi",
age: 13,
});
}
function updateCar() {
person.car.c1 += "1";
}
watch(person, (newValue, oldValue) => {
console.log("person變化了", newValue);
});
</script>
<template>
<h1>姓名: {{ person.name }}</h1>
<h1>年齡: {{ person.age }}</h1>
<h1>car: {{ person.car.c1 + "--" + person.car.c2 }}</h1>
<button @click="updateName">修改姓名</button>
<button @click="updatePerson">修改整個人</button>
<button @click="updateCar">修改car</button>
</template>
1.4. 監(jiān)聽ref或reactive定義的數(shù)據(jù)中的某個屬性
監(jiān)視ref或reactive定義的【對象類型】數(shù)據(jù)中的某個屬性，注意點如下：
- 若該屬性值不是【對象類型】，需要寫成函數(shù)形式。
- 若該屬性值是依然是【對象類型】，可直接編，也可寫成函數(shù)，建議寫成函數(shù)。
注意點： 若是對象，則監(jiān)視的是地址值，需要關(guān)注對象內(nèi)部，需要手動開啟深度監(jiān)視。
<script setup>
// 監(jiān)視`reactive`定義的【對象類型】數(shù)據(jù)，且默認(rèn)開啟了深度監(jiān)視。
import { reactive, watch } from "vue";
let person = reactive({
name: "zs",
age: 18,
car: {
c1: "c1",
c2: "c2",
},
});
function updateName() {
person.name += "~";
}
function updatePerson() {
person = Object.assign(person, {
name: "lisi",
age: 13,
});
}
function updateCar() {
person.car.c1 += "1";
}
watch(
() => person.name,
(newValue, oldValue) => {
console.log("person.name變化了", newValue);
}
);
watch(
() => person.car,
(newValue, oldValue) => {
console.log("person.car變化了", newValue);
},
{
deep: true,
}
);
</script>
<template>
<h1>姓名: {{ person.name }}</h1>
<h1>年齡: {{ person.age }}</h1>
<h1>car: {{ person.car.c1 + "--" + person.car.c2 }}</h1>
<button @click="updateName">修改姓名</button>
<button @click="updatePerson">修改整個人</button>
<button @click="updateCar">修改car</button>
</template>
1.5. 組合監(jiān)聽多個數(shù)據(jù)
<template>
<h1>sum: {{ sum }}</h1>
<h1>name: {{ person.name }}</h1>
<button @click="updateSum">修改sum</button>
<button @click="updateName">修改name</button>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
let sum = ref(0);
let person = reactive({
name: "zs",
});
function updateName() {
person.name += "~";
}
function updateSum() {
sum.value += 1;
}
watch([sum, person], ([sumNew, personNew], [sumOld, personOld]) => {
console.log(sumNew, personNew, sumOld, personOld);
});
</script>
1.6. 清除watch副作用
watch 的第二個參數(shù)是數(shù)據(jù)發(fā)生變化時執(zhí)行的回調(diào)函數(shù)。
這個回調(diào)函數(shù)接受三個參數(shù)：新值、舊值，以及一個用于清理副作用的回調(diào)函數(shù)。該回調(diào)函數(shù)會在副作用下一次執(zhí)行前調(diào)用，可以用來清除無效的副作用，如等待中的異步請求：
const id = ref(1)
const data = ref(null)
watch(id, async (newValue, oldValue, onCleanup) => {
const { response, cancel } = doAsyncWork(id.value)
// `cancel` 會在 `id` 更改時調(diào)用
// 以便取消之前未完成的請求
onCleanup(cancel)
data.value = await response.json()
})
watch 的返回值是一個用來停止該副作用的函數(shù)：
const unwatch = watch(() => {})
// ...當(dāng)該偵聽器不再需要時
unwatch()
以上就是Vue3中watch監(jiān)聽的五種情況詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3 watch監(jiān)聽情況的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue中"This dependency was not found"問題的解決方法
這篇文章主要介紹了Vue中"This dependency was not found"的問題的解決方法,需要的朋友可以參考下2018-06-06
大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關(guān)于如何利用vue控制元素的顯示與隱藏的相關(guān)資料,需要的朋友可以參考下2022-12-12
capture事件修飾符的作用是給元素添加一個監(jiān)聽器，當(dāng)元素發(fā)生冒泡時，先觸發(fā)帶有該修飾符的元素。這篇文章給大家介紹了Vue 事件修飾符capture 的使用，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了項目nginx部署到非根目錄下vue配置方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vuex?mutation?action同級調(diào)用方式
這篇文章主要介紹了vuex?mutation?action同級調(diào)用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
今天小編就為大家分享一篇vue.js父子組件通信動態(tài)綁定的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3中通過ref獲取元素節(jié)點的實現(xiàn)
這篇文章主要介紹了vue3中通過ref獲取元素節(jié)點的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue中mock數(shù)據(jù),模擬后臺接口實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue-property-decorator使用手冊，文中較詳細(xì)的給大家介紹了他們的用法，通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
vue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實例
下面小編就為大家?guī)硪黄獀ue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11