作用:监视数据变化(和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("给服务器发送请求")
}
})