目录
一、watch的使用方法
二、watchEffect的使用方法
三、watch和watchEffect的区别
一、watch的使用方法
watch(监听的数据,监听数据的函数,监听配置对象(是否立即执行,是否开启深度监听))
watch(data, (newVal, oldVal) => {}, {immediate: true, deep: true})
1.单个监听
let watchDataRef1 = ref<string>('ref数据');
watch(watchDataRef1, (newVal, oldVal) => {
console.log('newVal---', newVal); //newVal--- 修改的数据1
console.log('oldVal---', oldVal); //oldVal--- ref数据
});
let watchDataRef1 = ref<string>('ref数据');
watch(()=>watchDataRef1, (newVal, oldVal) => {
console.log('newVal---', newVal); //newVal--- 修改的数据1
console.log('oldVal---', oldVal); //oldVal--- ref数据
});
2.监听多个
- 数组的形式返回的也是数组
let watchDataRef1 = ref<string>('ref数据');
let watchDataRef2 = ref<string>('ref数据');
watch([watchDataRef1, watchDataRef2], (newVal, oldVal) => {
console.log('newVal---', newVal); //newVal--- ['修改的数据1', '修改的数据2']
console.log('oldVal---', oldVal); //oldVal--- ['ref数据', 'ref数据']
});
- 写多个watch
let watchDataRef1 = ref<string>('ref数据');
let watchDataRef2 = ref<string>('ref数据');
watch(watchDataRef1, (newVal, oldVal) => {
console.log('newVal---', newVal); //newVal--- newVal--- 修改的数据1
console.log('oldVal---', oldVal); //oldVal--- oldVal--- ref数据
});
watch(watchDataRef2, (newVal, oldVal) => {
console.log('newVal---', newVal); //newVal--- newVal--- 修改的数据2
console.log('oldVal---', oldVal); //oldVal--- oldVal--- ref数据
});
二、watchEffect的使用方法
- watchEffect刚开始就会立即执行,并且会自动收集依赖,当其中的依赖项发生改变,都会执行回调函数,watchEffect的停止监听
- 数据变化了就会再次执行watchEffect函数
let watchDataRef1 = ref<string>('ref数据');
watchEffect(() => {
console.log(`变化了${watchDataRef1.value}`);//变化了修改的数据1
});
- watchEffect接收一个副作用函数onInvalidate与flush
let watchDataRef1 = ref<string>('ref数据');
let stop = watchEffect(
onInvalidate => {
console.log(`变化了${watchDataRef1.value}`); //变化了修改的数据1
onInvalidate(() => {
console.log('清除副作用函数执行了!');
});
},
{
//'pre' 在组件更新更新前运行,默认为'pre'
//'post'会在onBeforeUpdate之后执行 没有会在之前
//'sync'强制效果始终同步触发。然而,这是低效的,应该很少需要。
flush: 'sync'
}
);
- 手动停止watchEffect的监听,需用一个变量来监听在,然后在调用就会关闭监听
let stop = watchEffect(
onInvalidate => {
console.log(`变化了${watchDataRef1.value}`); //变化了修改的数据1
onInvalidate(() => {
console.log('清除副作用函数执行了!');
});
},
{
//'pre' 在组件更新更新前运行,默认为'pre'
//'post'会在onBeforeUpdate之后执行 没有会在之前
//'sync'强制效果始终同步触发。然而,这是低效的,应该很少需要。
flush: 'sync'
}
);
stop();
三、watch和watchEffect的区别
- 两者都可监听数据的属性变化
- watch 既要指明监视的属性,也要指明监视的回调。 默认是惰性执行,监听源可以是一个具有返回值的 getter 函数,也可以直接是一个 ref
- watchEffect 不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。会根据其中的属性,自动监听其变化。