vue 3 的 watch 函数用于监听响应式数据变化，支持 ref 简单值、reactive 对象属性、多数据源，需配合 immediate、deep、flush 等配置项灵活使用。
Vue 3 的 watch 函数是 Composition API 中监听响应式数据变化的核心工具，用法灵活但需注意数据类型和监听方式的匹配。它不自动执行，只在依赖变化时触发回调，适合处理副作用（如请求、日志、DOM 更新）。
监听 ref 类型的简单值
最直接的场景：监听一个由 ref() 创建的基础类型（如数字、字符串、布尔值）。
- 无需额外配置，变化即触发，且能准确拿到新旧值
- 回调函数接收两个参数：
newVal和oldVal - 示例：const count = ref(0);
watch(count, (newVal, oldVal) => { console.log(`从 ${oldVal} → ${newVal}`); });
监听 reactive 对象的特定属性
直接监听整个 reactive 对象默认只响应引用变化，无法捕获内部属性变动；推荐用 getter 函数精准监听目标字段。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章