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})