watch
watch 需要侦听特定的数据源,并在回调函数中执行副作用。默认情况下,它也是惰性的,即只有当被侦听的源发生变化时才执行回调。
使用方法
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
}
)
// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {
})
//使用数组同时侦听多个源
const firstName = ref('')
const lastName = ref('')
watch([firstName, lastName], (newValues, prevValues) => {
console.log(newValues, prevValues)
})
firstName.value = 'John'
lastName.value = 'Smith'
watchEffect
watchEffect 函数,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
使用方法
const count = ref(0)
watchEffect(() => {
console.log(count.value)
})
setTimeout(() => {
count.value++
// -> logs 1
}, 100)
watch和watchEffect的相同点
watch 与 watchEffect共享停止侦听,清除副作用 (相应地 onInvalidate 会作为回调的第三个参数传入)、副作用刷新时机和侦听器调试行为。
watch和watchEffect的区别
执行时机 | 参数 | 结果 | |
---|---|---|---|
watch | 惰性地执行副作用,它不会立即执行,但可以配置 immediate,使其主动触发 | 至少要有两个参数(第三个参数是配置项),第一个参数是侦听的数据,第二个参数是回调函数 | 可以同时获取更改前和更改后的值 |
watchEffect | 立即执行,在页面加载时会主动执行一次,来收集依赖 | 只需要传递一个回调函数,不需要传递侦听的数据,它会在页面加载时主动执行一次,来收集依赖 | 获取不到更改前的值 |