vue3(watch监听器)

wtach监听器只能监听响应式数据，当数据变化的时才能触发watch的监听，可以得到新值与旧值

1. 基本格式如下：

• watch第一个参数监听源
• watch第二watch第二个参数回调函数（newValue,oldValue）

<template>
  <div>人物1:<input type="text" v-model="person1"></div>
  <div>人物2:<input type="text" v-model="person2"></div>

</template>
<script setup lang='ts'>
import { reactive, ref, watch } from 'vue';
const person1 = ref<string>('张三') const person2 = ref<string>('李四')

watch(person1,(newvale,oldvale)=>{
   console.log(newvale,oldvale);
 })
</script>

2. 当要监听多个数据时使用数组：

 watch([person1,person2],(newvale,oldvale)=>{
  console.log(newvale,oldvale);
})

3. 对于两个种响应式数据，ref，reactive，watch的效果是不一样的，ref来说无法进行深层次的监听，必须的使用watch第三个参数一个options配置项是一个对象{deep:ture//开启深度监听},reative是默认开启深度监听的

div>人物2:<input type="text" v-model="person2.per.name"></div>
const person2 =ref({
  per:{
    name:'李四',
    age:12
  }
})
watch(person2,(newvale,oldvale)=>{
  console.log(newvale,oldvale);
},{
  deep:true,
})

4.如果要监听某个对象的值(字符串)的时候要使用一个回调函数：

watch(()=>person2.per.name,(newvale,oldvale)=>{
   console.log(newvale,oldvale);
})