Vue 3 中监听 ref 数据应直接传 ref 对象而非 .value，watch 会自动解包；对象需 deep: true 才能监听内部变化；返回 stop 函数可手动停止监听。

Vue 3 中监听单个 ref 数据，直接传入 ref 变量本身即可，不需要写 .value，watch 会自动解包并追踪其值的变化。

正确写法：传 ref 对象，不是 .value

watch 接收的是响应式引用（ref），内部会自动读取和比较 .value。传 count.value 是普通值，失去响应式连接，监听不会触发。

• ✅ 正确：watch(count, (newVal, oldVal) => { ... })
• ❌ 错误：watch(count.value, (newVal, oldVal) => { ... })（不生效）

基础用法示例

常用于监听输入、计数器、开关状态等简单响应式变量：

python-flask-vue-creator

创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。

下载

• 模板中用 v-model 绑定输入框，修改时自动触发 watch 回调
• 回调函数可接收新旧两个参数，方便做差异判断或副作用处理
• 默认不立即执行，如需初始时也运行一次，加配置 { immediate: true }

常见注意事项

尤其注意 ref 包裹对象类型时的行为差异：

立即学习“前端免费学习笔记（深入）”；

• 若 person = ref({ name: 'Alice' })，仅改 person.value.name，watch 默认不触发（浅监听）
• 要监听对象内部变化，必须显式加 { deep: true }
• 若直接赋新对象 person.value = { name: 'Bob' }，则地址改变，watch 会触发，且能拿到新旧两个完整对象

停止监听的方法

watch 返回一个函数，调用它即可手动停止监听，适合在条件满足后释放资源：

• 例如：数值超过阈值、组件卸载前、表单提交后
• 写法：const stop = watch(count, callback); stop();