Vue模板语法不支持定义侦听器，必须在script中用watch选项或watch函数声明；选项式API在watch选项下配置，组合式API用watch()函数监听ref、reactive等响应式数据，异步操作选watch，派生缓存数据选computed。

Vue 模板语法本身不直接定义侦听器——侦听器必须在逻辑层（script）中声明，而不是写在模板（template）里。模板只负责渲染和绑定，响应式副作用逻辑要交给 watch 函数或 watch 选项来处理。

侦听器不能写在模板里，但可以配合模板使用

你无法在 {{ }} 或指令如 v-if 中“调用” watch；但你可以：

• 用 v-model 或事件（如 @input）更新响应式数据
• 在 script 中用 watch 监听该数据变化，执行请求、校验、状态切换等逻辑
• 变化结果可间接反映在模板中（比如显示提示文字、禁用按钮、更新列表）

两种主流写法：选项式 API 和组合式 API

选项式（Options API）：在组件的 watch 选项下定义：

示例：监听用户名输入并校验是否可用

watch: {<br>  username: {<br>    handler(newVal) {<br>      if (newVal.length > 2) {<br>        // 发起防抖后的请求<br>        checkUsername(newVal);<br>      }<br>    },<br>    immediate: false,<br>    deep: false<br>  }<br>}

组合式（Composition API）：在 setup() 或 <script setup></script> 中使用 watch() 函数：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

示例：监听两个 ref 并联动更新

const firstName = ref("");<br>const lastName = ref("");<br><br>watch([firstName, lastName], ([f, l]) => {<br>  console.log(`全名变为：${f} ${l}`);<br>});

监听对象或嵌套属性要注意 deep 和 getter 写法

直接监听 reactive 对象会失效，需用 getter 函数或开启深度监听：

• 监听对象某个字段：watch(() => user.profile.age, (newAge) => {...})
• 监听整个对象内部任意变化：watch(() => user, (newUser) => {...}, { deep: true })
• 监听数组长度或元素变动也需 deep: true

什么时候该用 watch 而不是 computed？

记住一个判断原则：

• 需要执行异步操作（发请求、定时器、DOM 操作）→ 用 watch
• 只是派生新数据且希望自动缓存 → 用 computed
• 比如：输入框实时搜索 → watch；购物车总价 → computed

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！