Watch
- 默认是懒侦听，即仅在侦听源发生变化时才执行回调函数。
- 只追踪明确定义的数据源，不会追踪在回调中访问到的东西
- 可以访问侦听数据的新值和旧值。
- 总共接收三个参数，侦听数据源、回调函数和配置选项。
const x = ref(1)
const y = ref(1)
const doubleX = computed(() => x.value * 2)
const obj = reactive({ count: 0 })
// 单个 ref
watch(x, (newValue) => {
console.log(`x is ${newValue}`)
})
// 计算属性
watch(doubleX, (newValue) => {
console.log(`doubleX is ${newValue}`)
})
// getter 函数
watch(
() => x.value + y.value,
(sum) => {
console.log(`sum of x + y is: ${sum}`)
}
)
// 响应式对象
watch(obj, (newValue, oldValue) => {
// 在嵌套的属性变更时触发
// 注意：`newValue` 此处和 `oldValue` 是相等的
// 因为它们是同一个对象！
})
// 以上类型的值组成的数组
watch([x, () => y.value], ([newX, newY]) => {
console.log(`x is ${newX} and y is ${newY}`)
})
WatchEffect
- 初始化执行一次
- 在副作用发生期间追踪依赖，自动分析出侦听数据源。
- 无法访问侦听数据的新值和旧值。
- 接受两个参数，回调函数、配置对象。
const url = ref('https://...')
const data = ref(null)
// 自动分析出侦听数据源
watchEffect(async () => {
const response = await fetch(url.value)
data.value = await response.json()
})
想要深入学习的同学，可以查阅这篇文章—《彻底搞懂 Watch、WatchEffect》，该博主讲的很详细！！！
