2025-5-22Vue3快速上手

1.watch监视属性

（1）情况一：监视【ref】定义的【基本类型】数据

<template><div><h1>当前求和为：{{ sum }}</h1><button @click="changeSum">求和加一</button></div>
</template><script lang="ts">export default {name:'Person234'}
</script><script lang="ts" setup >
import {ref,reactive,toRef,toRefs, computed,watch} from 'vue'
let sum = ref(0);
const changeSum = function(){sum.value ++;
}
const stopWatch = watch(sum,(newVal,oldVal)=>{console.log(newVal,oldVal)if(sum.value >=10){stopWatch()
}})</script><style></style>

下面是stopWatch的值

（2）情况二：监视【ref】定义的【对象类型】数据

未开启深度监视时：点击修改姓名和点击修改年龄都不会触发watch

开启immidiate时，无论被监视的值有无变化，都会触发watch

以下是开启了deep和immidiate的情况

<template><div><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改姓名</button><button @click="changeAge">修改年龄</button><button @click="changePeron">修改人</button></div>
</template><script lang="ts">export default {name:'Person234'}
</script><script lang="ts" setup >
import {ref,reactive,toRef,toRefs, computed,watch} from 'vue'
const person = ref({name:'张三',age:18
})
const changeName = function(){person.value.name += '~'
}
const changeAge = function(){person.value.age ++
}
const changePeron = function(){person.value = {name:'李四',age:20}
}
//watch的第一个参数：被监视的数据
//第二个参数：回调函数
//第三个参数：配置项（如：deep,immidiate)
const stopWatch = watch(person,(newVal,oldVal)=>{console.log('person变化了',newVal,oldVal)
},{deep:true,immediate:true})
</script><style></style>

(3)情况三：监视【reactive】定义的【对象类型】数据,默认开启深度监视，该深度监视无法关闭

这是因为reactive本身创建的是一个深层响应式对象，其所有嵌套属性都是响应式的。

<template><div><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改姓名</button><button @click="changeAge">修改年龄</button><button @click="changePeron">修改人</button></div>
</template><script lang="ts">export default {name:'Person234'}
</script><script lang="ts" setup >
import {ref,reactive,toRef,toRefs, computed,watch} from 'vue'
const person = reactive({name:'张三',age:18
})
const changeName = function(){person.name += '~'
}
const changeAge = function(){person.age ++
}
const changePeron = function(){Object.assign(person,{name:'李四',age:80})
}
//watch的第一个参数：被监视的数据
//第二个参数：回调函数
//第三个参数：配置项（如：deep,immidiate)
const stopWatch = watch(person,(newVal,oldVal)=>{console.log('person变化了',newVal,oldVal)
})
</script><style></style>

（4）情况四：监视ref或reactive定义的【对象类型】数据的某个属性

1）若监视的属性是基本数据类型，需要写成函数形式（getter函数）

//监听基本数据类型
watch(()=>person.name,(newVal,oldVal)=>{console.log('person.name修改了',newVal,oldVal)
})

2)若监视的属性是对象类型，可直接写，也可写成函数形式，最好写成函数形式

直接写：会发现只能监听到C1或C2的修改。但是无法监听car整体的修改

//监听对象数据类型，直接写
watch(person.car,(newVal,oldVal)=>{console.log('person.car修改了',newVal,oldVal)
})

写成函数形式：只能监听car整体的修改，无法监听C1或C2的修改

//监听对象数据类型，函数形式
watch(()=>person.car,(newVal,oldVal)=>{console.log('person.car修改了',newVal,oldVal)
})

写成函数形式加上开启深度监视，就可以监听到car整体的修改和C1、C2的修改

//监听对象数据类型，函数形式
watch(()=>person.car,(newVal,oldVal)=>{console.log('person.car修改了',newVal,oldVal)
},{deep:true})

<template><div><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>车1:{{ person.car.C1 }}</h2><h2>车2:{{ person.car.C2 }}</h2><button @click="changeName">修改姓名</button><button @click="changeAge">修改年龄</button><button @click="changeCar1">修改第一辆车</button><button @click="changeCar2">修改第二辆车</button><button @click="changeCar">修改整辆车</button></div>
</template><script lang="ts">export default {name:'Person234'}
</script><script lang="ts" setup >
import {ref,reactive,toRef,toRefs, computed,watch} from 'vue'
const person = reactive({name:'张三',age:18,car:{C1:'奔驰',C2:'宝马'}
})
const changeName = ()=>{person.name +='~'
}
const changeAge = ()=>{person.age +=1
}
const changeCar =()=>{person.car = {C1:'奥迪',C2:'大众'}}
const changeCar1 =()=>{person.car.C1 = '雅迪'
}
const changeCar2 =()=>{person.car.C2 = '爱码'
}
//监听基本数据类型
watch(()=>person.name,(newVal,oldVal)=>{console.log('person.name修改了',newVal,oldVal)
})
//监听对象数据类型，直接写
// watch(person.car,(newVal,oldVal)=>{
//   console.log('person.car修改了',newVal,oldVal)
// })
//监听对象数据类型，函数形式
watch(()=>person.car,(newVal,oldVal)=>{console.log('person.car修改了',newVal,oldVal)
},{deep:true})</script><style></style>

（5）情况五：监视以上几种情况

watch([()=>person.name,()=>person.car],(newVal,oldVal)=>{console.log('数组变化了',newVal,oldVal)
},{deep:true})