Watch 监视多个数据源

watch

可以同时监听多个数据，只要其中任何一个发生变化，回调函数都会执行。

前置代码

我们还是使用上一次使用的代码

<template>
<div class="person">
<h2>{{ ItShare.name }}</h2>
<h2>{{ ItShare.day }}</h2>
<h2>{{ ItShare.title.t1 }},{{ ItShare.title.t2 }}</h2>
<button @click="ChangeName">修改名字</button>
<button @click="ChangeDay">修改天数</button>
<button @click="ChangeT1">修改标题1</button>
<button @click="ChangeT2">修改标题2</button>
<button @click="ChangeT">修改整个标题</button>
</div>
</template>
<script lang="ts" setup>
import { reactive, watch } from 'vue';
let ItShare = reactive({
name: "IT知识一享",
day: 365,
title: {
t1:'学习VUE',
t2:'掌握VUE'
}
})
function ChangeName() {
ItShare.name += '*';
}
function ChangeDay() {
ItShare.day +=1;
}
function ChangeT1() {
ItShare.title.t1 = '熟悉VUE'
}
function ChangeT2() {
ItShare.title.t2 = '精通VUE'
}
function ChangeT(){
ItShare.title = {t1:'VUE大师',t2:'VUE大师+'}
}
</script>
<style scoped>
.person{
background-color: rgb(39, 148, 191);
padding-left: 50px;
}
.btn {
display: flex;
gap:20px
}
</style>
    

基本语法

Watch 监视多个数据源的基本语法如下，将多个数据源放到一个数组中：

watch([source1, source2, ...], (newValues, oldValues) => {
// newValues 和 oldValues 也是数组
// newValues[0] 对应 source1 的新值
// newValues[1] 对应 source2 的新值
// ... 以此类推
});
    

实例使用

例如，我们现在想监视姓名和第一个标题的变化：

watch([()=>ItShare.name,()=>ItShare.title.t1],(newValue,oldValue) => {
console.log('姓名或者标题1发生了变化',newValue,oldValue);
})
    

当我们修改名字或者标题1的时候，Watch 监视可以正常工作。当然，当我们修改整个标题的时候，标题1也会发生变化，因此也会被监视到；回调函数的 newValue 和 oldValue 并不是单独的某个属性，而是这个数组的变化。