vue3 中 wacth监听函数
以下代码同样也是在setup语法糖中的写法
watch接收三个参数，
- 一个想要侦听的响应式引用或 getter 函数
- 一个回调
- 可选的配置选项
（1）使用watch监听ref的数据
<template>
<p>我是新的首页</p>
<button @click="change">改变num1的值</button>
</template>
<script lang="ts" setup>
import { onMounted,watch,ref,reactive } from 'vue';
const num1=ref<number>(0)
const change=()=>{
num1.value++
}
watch(num1,(newV,old)=>{
console.log(newV,old);
})
</script>
<style scoped></style>
（2）使用ref监听多个响应式数据，第一个参数就是一个数组
<template>
<p>我是新的首页</p>
<button @click="change">改变值</button>
</template>
<script lang="ts" setup>
import { onMounted,watch,ref,reactive } from 'vue';
const num1=ref<number>(0)
const num2=ref<number>(0)
const change=()=>{
num1.value++
num2.value++
}
watch([num1,num2],(newV,old)=>{
console.log(newV,old);
})
</script>
<style scoped></style>
（3）使用watch监听reactive的响应式数据，这里有很多需要注意的地方
* 如果直接监听整个数据的改变，则old无法获取正确的值，同时deep深度监听是无效的，默认开启无法关闭
<template>
<p>我是新的首页</p>
<button @click="change">改变值</button>
</template>
<script lang="ts" setup>
import { onMounted,watch,ref,reactive } from 'vue';
interface Person{
age:number;
}
const person=reactive<Person>({
age:10
})
const change=()=>{
person.age++
}
//监听整个person
watch(person,(newV,old)=>{
console.log('person变化了',newV,old);
},{
deep:false
})
</script>
<style scoped></style>
打印结果：
- 监听reactive响应式数据中的某个属性，old是可以正确获取的，deep同样也是默认开启无法关闭的，注意监听某个属性watch的第一个参数写法改变了，是一个函数
<template>
<p>我是新的首页</p>
<button @click="change">改变值</button>
</template>
<script lang="ts" setup>
import { onMounted,watch,ref,reactive } from 'vue';
interface Person{
age:number;
}
const person=reactive<Person>({
age:10
})
const change=()=>{
person.age++
}
watch(()=>person.age,(newV,old)=>{
console.log('person变化了',newV,old);
},{
deep:false
})
</script>
<style scoped></style>
打印结果：
- 使用wacth监听reactive的多个属性，同样第一个参数就是数组
<template>
<p>我是新的首页</p>
<button @click="change">改变值</button>
</template>
<script lang="ts" setup>
import { onMounted,watch,ref,reactive } from 'vue';
interface Person{
age:number;
name:string
}
const person=reactive<Person>({
age:10,
name:'张三'
})
const change=()=>{
person.age++
person.name+="~"
}
watch([()=>person.age,()=>person.name],(newV,old)=>{
console.log('person变化了',newV,old);
},{
deep:false
})
</script>
<style scoped></style>
打印结果：
第三个可配置的选项就是深度监听deep和立即执行immediate
watch(num,(newValue,old)=>{
console.log(newValue);
},{
deep:true,
immediate:true
})
