作用：监视数据的变化（和
Vue2中的watch作用一致）
特点：Vue3中的watch只能监视以下四种数据：
ref定义的数据。reactive定义的数据。- 函数返回一个值（
getter函数）。- 一个包含上述内容的数组。
vue2中的写法
let num = ref(0);
watch: {
//简写
// num(newVal, oldVal) {
// console.log('num值变化了', newVal, oldVal);
// },
//完整写法，可以配置参数
num: {
immediate: true, //刷新页面立即触发
deep: true, //深度监听
handler(newVal, oldVal) {
console.log('num值变化了', newVal, oldVal);
},
},
},
vue3中的写法
1. 监视 ref 所定义的【基本类型】数据（响应式数据）
监视
ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。
let sum = ref(0)
const stopWatch = watch(sum, (newVal, oldVal) => {
console.log(newVal, oldVal);
if (newVal >= 5) {
stopWatch() // 如果sum>=5 停止监视
}
},{immediate:false,deep:true})
2. 监视 ref 所定义的【对象类型】数据
直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视
若修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为它们是同一个对象
若修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。
<script setup>
import { ref, watch } from "vue"
let person = ref({
name: 'zs',
age: 19
})
// person中name，age任何一个值改变都可以监听到
watch(person, (val) => {
console.log(val)
}, { deep: true })
// 只有person 整个对象被替换才可以监听到 （开启深度监听才可以同上面一样）
watch(person, (val) => {
console.log(val)
})
</script>
3. 监视 ref 所定义的【多个数据】
let age = ref(10)
let sum = ref(0)
let person = ref({
name: 'zs',
age: 10
})
watch([age, sum, person], (val) => {
console.log(val);
}, { deep: true })
//num或msg值变化了 (2) [1, '你好'] (2) [0, '你好']
4. 监视 reactive 定义的【对象类型】数据
1.注意：此处无法正确获取oldVal
2.注意：强制开启了深度监视，（deep配置无效）
let person = reactive({
name: 'zs',
age: 20,
a: {
b: {
c: 100
}
}
})
watch(person, (newVal) => {
console.log(newVal);
})
5. 监视 ref 或 reactive 定义的【对象类型】数据中的某个属性
若该属性值不是【对象类型】，需要写成函数形式
若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。
监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
let person = reactive({
name: 'zs',
age: 20,
a: {
b: {
c: 33
}
}
})
let person2 = ref({
name: 'zs',
age: 20,
})
// 监听 reactive 定义的 age
watch(() => person.age, (newVal) => {
console.log('reactive[age]', newVal);
})
// 监听 reactive 定义的 a
watch(person.a, (newVal) => {
console.log('reactive[a]', newVal);
}, { deep: true })
// 监听 ref 定义的 age
watch(() => person2.value.age, (newVal) => {
console.log('ref[age]', newVal);
})
6. reactive 定义的【对象类型】数据中的多个属性
let person = reactive({
name: 'zs',
age: 20,
a: {
b: {
c: 55
}
}
})
watch([() => person.age, () => person.name], (newVal) => {
console.log(newVal);
})
7. watchEffect
watch 的套路是：既要指明监视的属性，也要指明监视的回调
watchEffect 的套路是：不用指明监视哪个属性，监视的回掉中用到那个属性，那就监视哪个属性
watchEffect 有点像computed：
- 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值
- 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值
let temp = ref(0)
let height = ref(0)
const stopWtach = watchEffect(() => {
// 室温达到50℃，或水位达到20cm，立刻联系服务器
if (temp.value >= 50 || height.value >= 20) {
console.log(document.getElementById('demo')?.innerText)
console.log('联系服务器')
}
// 水温达到100，或水位达到50，取消监视
if (temp.value === 100 || height.value === 50) {
console.log('清理了')
stopWtach()
}
})
// 用watch实现，需要明确的指出要监视：temp、height
watch([temp, height], (value) => {
// 从value中获取最新的temp值、height值
const [newTemp, newHeight] = value
// 室温达到50℃，或水位达到20cm，立刻联系服务器
if (newTemp >= 50 || newHeight >= 20) {
console.log('联系服务器')
}
})
总结：
1.监视 ref 所定义的一个响应式数据(可以正常拿到 newVal oldVal)
2.监视 ref 所定义的多个响应式数据(可以正常拿到 newVal oldVal, 吧监视的属性放到数组里面)
3.监视 reactive 所定义的一个响应式数据(监视对象)(无法正确获取 oldVal,强制开启了深度监视，deep配置无效)
4.监视 reactive 所定义的一个响应式数据中的某个属性(监视对象中的某个属性,如果监视的属性是个对象,需要开启深度监视 deep),(可以正常拿到 newVal oldVal,监视的属性需要写到函数里面)
5.监视 reactive 所定义的一个响应式数据中的某些属性(监视对象中的某些属性),(可以正常拿到 newVal oldVal,需要用数组包裹，在写到函数里面)
