2026/1/16 9:58:15
网站建设
项目流程
高校网站群建设,网站建设开发三层架构,wordpress网址显示IP,石河子农八师建设兵团社保网站watch 和 watchEffect 都是 Vue 3 的侦听 API#xff0c;但定位不同#xff1a;watch 更“精确监听某个源”#xff0c;watchEffect 更“自动收集依赖做副作用”。
核心区别
监听对象 watch#xff1a;你要“明确写出”监听源#xff08;ref/getter/数组等#xff09;。…watch和watchEffect都是 Vue 3 的侦听 API但定位不同watch更“精确监听某个源”watchEffect更“自动收集依赖做副作用”。核心区别监听对象watch你要“明确写出”监听源ref/getter/数组等。watchEffect不写监听源回调里“用到什么响应式数据就监听什么”自动依赖收集。是否立即执行watch默认不立即执行需{ immediate: true }才会先执行一次。watchEffect默认立即执行一次。是否能拿到新旧值watch回调参数是(newVal, oldVal)便于做差异逻辑。watchEffect没有显式(new, old)本质是“重新跑一遍副作用”。适用场景watch适合“某个值变化后做事”尤其需要 new/old、需要精确控制触发条件时。watchEffect适合“依赖很多/不确定依赖哪些”的副作用同步例如根据多个响应式值更新外部状态。停止与清理两者都返回stop()可停止。两者都支持清理副作用watch的第 3 个参数onInvalidatewatchEffect的参数onCleanup用法类似解决请求竞态/取消订阅。简单示例对比watch明确监听keywordwatch( () keyword.value, (newK, oldK) { // 需要 new/old 做对比 }, { immediate: true } )watchEffect自动收集依赖watchEffect((onCleanup) { // 这里读了 keyword、page就会自动监听它们 // 适合把多个依赖驱动的副作用写在一起 })怎么选要“明确监听谁”、要 new/old、要避免误触发 → 用watch依赖多且会变、想省去列依赖、做副作用同步 → 用watchEffect