vue3-选项式API-Watch,watchEffect

作用：监视数据变化（和vue中的watch作用一致）

特点：Vue3中的watch只能监视一下四种数据：

1.ref定义的数据

2.reactive定义的数据

3.函数返回一个值（getter函数）

4. 一个包含上述内容的数组

情况1：

 监视ref定义的基本类型数据：直接写数据名即可，监视的是其value值的改变

import {ref,watch}from 'vue'
// 数据
let sum = ref(0)
//方法
function changeSum(){
sum.value+=1
}
//监视
const stopWatch=watch(sum,(newValue,oldValue)=>{
console.log('sum变化了',newValue,oldValue)
if(newValue>10){
  stopWatch() //如果sum值大于10,则停止监听
}
})

情况2：

监视ref定义的对象类型数据，监视的是对象的地址值，若想监视对象内部的属性变化，需要手动开启深度监听

let person=ref({
  name:'张三',
  age:18
})
function changeName(){
 person.value.name='李四'
}
//监视
watch(person,(newValue,oldValue)=>{
},{deep:true})

备注：旧房子换内容，还是旧房子，oldValue=newValue，新房子newValue!=oldValue

如果修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为他们是同一个对象。

如果修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象。

情况3：

监视reactive定义的对象类型数据，且默认开启了深度监听 

备注reactive定义的数据不可以用=全部修改，如果修改需要用object.assign(old,new)  ref定义的数据可以直接赋值修改

情况4：监视ref或者reactive 定义的 对象类型数据中的某个属性，注意点如下：

1. 若该属性值不是对象类型，需要写成函数形式。

2. 若该属性值依然是对象类型，可直接编写，也可写成函数。

eg:监听的属性值是基本类型的

let person={
name:'张三',
age:18
}
watch(()=>{return person.name},(newValue,oldValue)=>{
console.log('名字发生变化')
})

eg:监听的属性值是对象类型

let person={
car:{name:'大众',price:'18w'}
}
//方式一
watch(person.car,(newValue,oldValue)=>{
 console.log('值变了')
})
//备注：会发现car 里面的某个属性值变化时,会输出'值变了',但是car对象直接赋值时,监听不到
//方式二
watch(()=>person.car,(newValue,oldValue)=>{
 console.log('值变了')
})
//备注：会发现car对象直接赋值时,会输出'值变了',但是car 里面的某个属性值变化时,监听不到,当添加{deep:true} 属性时，则可以监视到所有的变化

情况5：监视多个数据

watch([()=>person.name,()=>person.car],(newValue,oldValue)=>{
 console.log('数据变化了')
},{deep:true})

watchEffect 

用法：

watchEffect(()=>{
 if(temp.value>=60 || height.value>=80){
   console.log("给服务器发送请求")
}
})