基础
watch(sortType, () => {
getData();
});
深度
watch(
(): any => route?.query?.tab, // 1 source: WatchSource<any> 监听的数据源
() => { // 2 cb: WatchCallback 监听回调
const tab = route?.query?.tab;
if (tab) {
active.value = tab as Tlabel;
previewActive.value = tab as Tlabel;
}
},
{ deep: true, immediate: true } // 3、options?: WatchOptions 配置
);
1.watch
第一次页面展示的时候不会执行,数据变化的时候才会执行,设置了初始化监听(immediate:true)才会被初始化就监听
参数可以拿到当前值和原始值
可以监听多个数据的变化,用一个侦听器承载
2.watchEffect
页面首次加载就会执行
自动检测内部代码,代码中有依赖便会执行
不需要传递要侦听的内容,会自动感知代码依赖,不需要传递很多参数,只要传递一个回调函数
不能获取之前数据的值,只能获取当前值
一些异步的操作放在这里执行会更合适
3.watch函数的两个坑
监听reactive定义的响应式数据(该数据为一个对象,因为reactive只能定义数组或对象类型的响应式)时:oldValue无法正确获取,会强制开启深度监听,deep配置不生效
监听reactive定义的响应式数据中的某个属性时,且该属性是一个对象,此时的deep生效
import {ref,reactive,watch,watchEffect} from 'vue'
export default {
name:'demo',
setup(){
//数据
let sum = ref(0)
let msg = ref('hello')
let person = reactive({
name:'zhangsan',
age:'18',
job:{
j1:{
salary:20
}
}
})
//监视(三个参数,第一个是监视的对象,第二个是监视的回调函数,第三个是监视的配置)
//情况一:监视ref所定义的一个响应式数据
watch(sum,(newValue,oldValue)=>{
console.log('sum的值变化了',newValue,oldValue)
},{immediate:true,deep:true})
//deep深层次触发(此处设置deep无意义)
//情况二:监视ref所定义的多个响应式数据,写成数组的形式
watch([sum,msg],(newValue,oldValue)=>{
console.log('sum或者msg变了',newValue,oldValue)
})
//情况三:监视reactive所定义的响应式数据
//若监视的是reactive定义的响应式数据,则无法获得oldValue,会强制开启深度监视
//改变person的任意一个属性都会被监视到
watch(person,(newValue,oldValue)=>{
console.log('person改变了',newValue,oldValue)
})
//尝试设置deep:false,关闭深度监听(目的:改变job的值不会被watch监听到)
//发现deep:false并没有生效,原因是此时watch监视的是reactive定义的响应式对象
//默认强制开启了深度监听
watch(person,(newValue,oldValue)=>{
console.log('person改变了',newValue,oldValue)
},{deep:false})
//情况四:监视reactive所定义的响应式数据中的某个属性
watch(()=>person.name,(newValue,oldValue)=>{
console.log('person的job改变了',newValue,oldValue)
})
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person的job改变了',newValue,oldValue)
})
//从上边我们发现改变name会触发监听,但是改变job不会
//这是因为name属性的值只是一个简单的基本类型数据,
//而job属性的值是一个对象,比较深,想要监视到,就要开启深度监视,程序如下:
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person的job改变了',newValue,oldValue)
},{deep:true})//此时job改变,会被监视到,此处的deep配置生效
//需要和情况三进行区分,此处watch监视的是reactive所定义的对象中的某个属性
//而情况三watch监视的是reactive所定义的对象
//情况五:监视reactive所定义的响应式数据中的某些属性,写成数组的形式
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
console.log('person的name或age改变了',newValue,oldValue)
})
//watchEffect函数内部所指定的回调中用到的数据只要发生变化,就会重新执行回调
//只有一个参数,就是回调
watchEffect(()=>{
const x1 = sum.value//因为sum是ref定义的响应式数据,需要使用.value调用
const x2 = person.age
console.log('watchEffect配置的回调执行了')
})
//返回一个对象(常用)
return{
sum,
msg,
person
}
}
}