Vue3 组合式API watch 完整可运行示例仅script setup带赋值打印输出统一前置导入vuescript setupimport { ref, reactive, watch, watchEffect, watchPostEffect, watchSyncEffect } from vue/script示例 1监听单个 ref 基础用法vuescript setupimport { ref, watch } from vueconst num ref(0)watch(num, (newVal, oldVal) {console.log(新值, newVal)console.log(旧值, oldVal)})// 修改数据num.value 10// 输出// 新值10// 旧值0/script示例 2watch 搭配 immediate 初始化立即执行vuescript setupimport { ref, watch } from vueconst num ref(0)watch(num, (newVal, oldVal) {console.log(新值, newVal)console.log(旧值, oldVal)}, { immediate: true })// 无需修改页面加载自动输出// 首次加载输出// 新值0// 旧值undefined// 修改数据num.value 66// 输出// 新值66// 旧值0/script示例 3监听完整 reactive 对象需 deep 深度监听vuescript setupimport { reactive, watch } from vueconst user reactive({ name: 小明, info: { age: 18 } })watch(user, (newVal, oldVal) {console.log(新对象, newVal)console.log(旧对象, oldVal)}, { deep: true })// 修改内层属性user.info.age 25// 输出// 新对象{ name: 小明, info: { age: 25 } }// 旧对象{ name: 小明, info: { age: 25 } }/script示例 4精准监听 reactive 单层属性getter 函数无需 deepvuescript setupimport { reactive, watch } from vueconst user reactive({ name: 小明, info: { age: 18 } })watch(() user.name, (newVal, oldVal) {console.log(新名字, newVal)console.log(旧名字, oldVal)})// 修改nameuser.name 小红// 输出// 新名字小红// 旧名字小明/script示例 5精准监听 reactive 多层嵌套属性getter 函数vuescript setupimport { reactive, watch } from vueconst user reactive({ name: 小明, info: { age: 18 } })watch(() user.info.age, (newVal, oldVal) {console.log(新年龄, newVal)console.log(旧年龄, oldVal)})// 修改嵌套属性user.info.age 30// 输出// 新年龄30// 旧年龄18/script示例 6同时监听多个数据源数组监听源vuescript setupimport { ref, reactive, watch } from vueconst keyword ref()const user reactive({ info: { age: 18 } })const type ref(1)watch([keyword, () user.info.age], ([newKey, newAge], [oldKey, oldAge]) {console.log(新关键词, newKey)console.log(新年龄, newAge)console.log(旧关键词, oldKey)console.log(旧年龄, oldAge)})// 修改 keywordkeyword.value 前端// 输出// 新关键词前端// 新年龄18// 旧关键词// 旧年龄18// 修改年龄user.info.age 22// 输出// 新关键词前端// 新年龄22// 旧关键词前端// 旧年龄18/script示例 7flush 配置控制执行时机 postDOM 更新后执行vuescript setupimport { ref, watch } from vueconst num ref(0)watch(num, (newVal) {console.log(DOM更新完成当前值, newVal)}, { flush: post })num.value 99// 等待DOM更新后输出// DOM更新完成当前值99/script示例 8手动停止监听vuescript setupimport { ref, watch } from vueconst num ref(0)const stopWatch watch(num, (newVal) {console.log(数值变更, newVal)})num.value 10// 输出数值变更10// 停止监听stopWatch()num.value 20// 无任何打印输出/script示例 9watch 完整配置项immediatedeepflush 调试钩子vuescript setupimport { reactive, watch } from vueconst user reactive({ name: 小明, info: { age: 18 } })watch(() user.info.age,(newVal, oldVal) {console.log(新年龄, newVal)console.log(旧年龄, oldVal)},{immediate: true,deep: false,flush: post,onTrack(e) {console.log(调试-收集依赖, e)},onTrigger(e) {console.log(调试-触发监听, e)}})// 页面初始化自动输出// 新年龄18// 旧年龄undefineduser.info.age 28// 输出// 调试-触发监听 ...// 新年龄28// 旧年龄18/script示例 10watchEffect 自动收集依赖无 oldVal自带 immediatevuescript setupimport { ref, reactive, watchEffect } from vueconst num ref(0)const user reactive({ name: 小明 })watchEffect((onCleanup) {console.log(数字, num.value, 用户名, user.name)// 副作用清理函数onCleanup(() {console.log(执行清理操作)})})// 页面初始化自动输出// 数字0 用户名小明num.value 50// 输出// 执行清理操作// 数字50 用户名小明user.name 小李// 输出// 执行清理操作// 数字50 用户名小李/script示例 11watchPostEffect 简写 flush:postvuescript setupimport { ref, watchPostEffect } from vueconst num ref(0)watchPostEffect(() {console.log(DOM已更新num值, num.value)})num.value 100// DOM更新后输出// DOM已更新num值100/script示例 12watchSyncEffect 同步执行 flush:syncvuescript setupimport { ref, watchSyncEffect } from vueconst num ref(0)watchSyncEffect(() {console.log(同步触发num值, num.value)})num.value 88// 立刻同步输出// 同步触发num值88/script