Vue3中组合API-watch函数

           当需要侦听一些信息的变化时， 需要用到watch侦听器，当被侦听的信息变化时，触发侦听器的回调函数

典型的场景：路由的参数发生变化时，重新调用接口获取组件的数据

1、侦听ref定义的响应式数据

<template>
<div> 侦听器 <div>
<div>{{count}}</div>
<button @click='count+=1'>点击+1</button>

</template>


<scirpt>
import { ref,watch } from 'vue'

export default {
 name:'App',
 setup(){
   const count =ref(0)
   watch(count,(newValue,oldValue)=>{
   
   console.log(newValue,oldValue)
   
  })
  return { count }

  }
}
 
</script>

输出的结果：

页面初始渲染的数据

点击+1按钮以后，页面的变化以及watch侦听到的数据的变化打印的newValue和oldValue

 2、侦听reactive定义的响应式数据

侦听对象

<template>
<div> 侦听器 <div>
<button @click='hClick'>点击</button>
</template>

<scirpt>
name:'App',
setup(){
const obj = reactive({
  msg:'tom'
})

watch(obj,(newValue,oldValue)=>{
  console.log(obj,newValue,oldValue)
  
})

const hClick=()=>{
  obj.msg='jerry'
}
 
return { count,obj,hClick}

}


</script>

打印出来的结果

总结：如果侦听对象，那么侦听器的回调函数的两个参数是一样的结果，表示最新的对象数据，此时，也可以直接读取被侦听的对象，那么得到的值也是最新的 

同样，数组也一样，如果侦听的是数组，那么侦听器得到的回调函数的两个参数一样的结果，都表示最新的数组数据

如果想要得要没有改变之前的旧值，那么在侦听的时候可以将对象或者数组拷贝一下，就不会改变最初的值

watch(()=>{ return {...obj}},(newValue,oldValue)=>{})
watch(()=>{ return [...arr],(newValue,oldValue)=>{})

 3、侦听多个数据

<template>

 <button @click='hClick'> 点击</button>
</template>

<scirpt>
import {ref} from 'vue'
export default{
const n1=ref(1)
const n2=ref(2)

watch([n1,n2],(v1,v2)=>{
 // v1、v2都是数组
 // v1表示被监听的所有值的最新值
 // v2表示被监听的所有值的原有值
 console.log(v1,v2)

})
const hClick=()=>{
 n1.value=3
 n2.value=34
}
return { n1,n2,hClick}
}

</sccript>

 打印的结果

 4、监听reactive定义的响应式数据的某一个属性

<template>

<button @click='hClick'>点击</button>
</template>

<scirpt>
import {reactive,watch} from  'vue'
setup(){

const stuInfo =reactive({
  uname:'lisi',
  age:12

 })
watch(()=>stuInfo.age,(v)=>{
  console.log(v)
 })
const  hClick=()=>{
 stuInfo.age=13
 }
retuen { hClick,stuInfo }
} 



</scirpt>

如果侦听对象中的某个属性，需要用函数方式，监听更少的属性有利于提高性能

5、配置选项用法

watch的配置选项，

immediate：true  表示组件渲染之后，立即触发一次

deep：true  表示深度侦听对象里面的子属性，被侦听的内容需要是函数的写法