在Vue3中,watch中的参数可以分为两部分,即要监听的响应式数据以及回调函数。
语法格式如下:
watch(要监听的响应式数据, 回调函数)
除了以上的两个还有其他的参数
immediate
:是否在初始化时立即执行一次回调函数,默认为false
。deep
:是否深度观察对象或数组的变化,默认为false
。flush
:在触发回调函数之前进行何种操作,默认为"pre"
。可选值有:"pre"(立即更新DOM)、"post"(延迟到队列中的所有回调函数执行完毕后再更新DOM)和"sync"
(在变更时同步应用更改)。onTrigger
:在触发回调函数之前执行的函数。onStop
:当停止观察时执行的函数。lazy
:是否初始不触发回调函数,默认为false
。
参数说明:
- 要监听的响应式数据:可以是一个ref对象、reactive对象或者计算属性等
- 回调函数:当被监听的响应式数据发生变化时,回调函数会被调用,可以接受到被监听的数据的新值和旧值
示例代码:
import { reactive, watch } from 'vue'
const state = reactive({count: 0
})
watch(() => state.count, (newValue, oldValue) => {console.log('count发生变化:', newValue, oldValue)
})
state.count++ // count发生变化: 1 0import { watch, ref, reactive } from 'vue';
// 观察一个响应式对象
const state = reactive({name: 'John',age: 25,
});
watch(() => state.name, (newValue, oldValue) => {console.log(`Name changed from ${oldValue} to ${newValue}`);
});
// 观察一个ref
const count = ref(0);
watch(() => count.value, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);
});
// 观察一个函数
watch(() => {return state.age * count.value;},(newValue, oldValue) => {console.log(`Computed value changed from ${oldValue} to ${newValue}`);}
);
// 监听多个数据源
watch([() => state.name, () => count.value], ([newName, newCount], [oldName, oldCount]) => {console.log(`Name changed from ${oldName} to ${newName}`);console.log(`Count changed from ${oldCount} to ${newCount}`);
});
// 配置项示例
watch(() => state.name,(newValue, oldValue) => {console.log(`Name changed from ${oldValue} to ${newValue}`);},{ immediate: true } // 立即执行回调函数
);
值得注意的是,在Vue3中,watch函数返回一个stop函数,用于停止侦听。你可以使用stop函数来停止之前注册的watch:const stopWatcher = watch(() => state.name, (newValue, oldValue) => {console.log(`Name changed from ${oldValue} to ${newValue}`);
});
// 停止监听
stopWatcher();