Vue中 watch 与 watchEffect 的区别

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()
})