JavaScript无原生watch语法，但可通过DevTools Watch面板调试观察、Proxy监听对象属性、轮询式watch函数或框架响应式API实现变量/表达式监视。
JavaScript 本身没有原生的 watch 表达式语法（如 Vue 2 的 vm.$watch 或 Chrome DevTools 中的“Watch”面板功能），但你可以通过几种实用方式实现对变量或复杂表达式的实时数值变化监视。关键在于区分「运行时主动监听」和「调试时被动观察」两种场景。
在浏览器开发者工具中用 Watch 面板观察表达式
这是最直接、无需改代码的方式，适用于调试阶段：
- 打开 Chrome / Edge / Firefox 的 DevTools（F12），切换到 Sources 或 Debugger 标签页
- 在右侧找到 Watch 面板（Chrome 中叫 “Watch”，Firefox 叫 “Expressions”）
- 点击 + 添加表达式，例如：
user.profile.name、items.filter(i => i.active).length、Math.max(...numbers)
只要当前执行上下文（比如断点暂停时）能访问到这些变量，表达式就会实时求值并显示结果 - 支持嵌套属性、函数调用、数组方法等任意合法 JS 表达式，但不能含赋值或声明语句（如
a = 1会报错）
用 Proxy 实现运行时变量变更监听
当你需要在代码执行中自动响应某个对象属性的变化（类似 Vue 2 的 Object.defineProperty 或 Vue 3 的 reactive），可用 Proxy：
const obj = { count: 0, name: 'Alice' };
const observed = new Proxy(obj, {
set(target, key, value) {
console.log(`[${key}] 从 ${target[key]} → ${value}`);
target[key] = value;
return true;
}
});
observed.count = 5; // 控制台输出：[count] 从 0 → 5
注意：Proxy 只监听对象属性的读写，不支持对原始值（如 let x = 1）或表达式（如 a + b）直接监听；若需监听计算值，应将其封装为 getter 函数再代理。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
手动封装 watch 函数监控表达式（简易版）
对于简单逻辑，可写一个轮询式 watch 工具（仅用于开发/调试，避免在生产环境高频轮询）：
function watch(expression, callback, interval = 200) {
let lastValue;
const watcher = () => {
const newValue = expression();
if (newValue !== lastValue && (lastValue !== undefined || true)) {
callback(newValue, lastValue);
lastValue = newValue;
}
};
const id = setInterval(watcher, interval);
return () => clearInterval(id); // 返回取消监听函数
}
// 使用示例：监听全局变量或复杂表达式
const stop = watch(
() => document.querySelectorAll('.item').length,
(now, prev) => console.log(`元素数量变化：${prev} → ${now}`)
);
// 调用 stop() 可停止监听
⚠️ 注意：该方式依赖定时取值，无法捕获瞬时变更；且表达式必须是无副作用的纯函数，否则可能引发意外行为。
现代替代方案：用响应式库或 DevTools 断点条件
真正需要「响应式 watch」时，推荐更健壮的方案：
- 前端框架中：Vue 用
watch()（组合式 API）或watchEffect；React 用useEffect+ 依赖数组；Svelte 用$:声明式响应 - 调试增强：在 DevTools 中给某行打条件断点（右键 → “Edit breakpoint”），输入
user.age > 18，满足时才暂停，效果接近「watch + trigger」 - 性能敏感场景：避免轮询或 Proxy 深度监听，优先通过事件、状态更新钩子（如 Redux middleware、MobX reaction）触发逻辑
