HTML模板本身无响应式能力，数据监听依赖JS层响应式系统（如Vue的ref/reactive、Web Components的Proxy等），模板仅负责视图描述，变化逻辑始终在JavaScript中实现。
HTML模板里没法直接监听数据变化
HTML本身是静态标记语言，<template>、<slot> 或内联 {{value}} 都不带响应式能力。所谓“模板监听数据”，实际依赖的是宿主环境（比如 Vue、React、Lit、或者原生 Custom Elements + Object.defineProperty/Proxy）提供的绑定机制。别被“模板”二字误导——真正干活的是 JS 层的响应式系统。
Vue 的 v-model 和 watch 怎么配合模板生效
Vue 模板中的 {{msg}} 或 v-bind:title="title" 背后是依赖收集 + 派发更新。关键点不在 HTML 写法，而在响应式数据声明方式：
- 必须用
ref()或reactive()创建响应式变量，let msg = 'hello'不会触发更新 -
watch()监听的是响应式引用（ref或reactive对象），不是原始值 - 在
setup()中使用watch时，若监听对象属性，推荐用函数形式：watch(() => state.count, (n) => {...})，避免浅监听陷阱
示例：修改 count 后，模板中 {{count}} 自动重绘，watch 也同步触发——前提是 count 是 ref(0)，不是普通数字。
原生 Web Components 中 attributeChangedCallback 的局限性
如果你用 customElements.define() + static observedAttributes = ['data-value']，那只能监听 HTML attribute 变化（字符串），不能监听 JS 属性赋值或嵌套对象变更：
立即学习“前端免费学习笔记（深入）”；
-
el.setAttribute('data-value', '123')→ 触发attributeChangedCallback -
el.dataValue = 456→ 完全无反应（除非你手动定义 setter 并调用this.requestUpdate()） - attribute 值始终是字符串，类型丢失；想监听对象变化得自己用
JSON.stringify对比或引入deep-equal
所以靠 attribute 做“数据监听”只适合简单配置场景，复杂状态建议搭配 PropertyDescriptor 或 Proxy 封装内部 state。
模板字符串插值（innerHTML + replace）根本不算监听
有人用 document.getElementById('tpl').innerHTML = template.replace('{{name}}', user.name)，这属于一次性渲染，后续 user.name 改变完全不影响 DOM。这种写法：
- 没有依赖追踪，不构成响应式
- 容易 XSS（没做转义）
- 无法处理条件/循环，维护成本高
- 性能差：每次都要重新解析整个字符串并重写
innerHTML
真要轻量级响应式，至少用 Text 节点 + textContent 更新，或借助 lit-html 的 html`` 模板函数——它底层用了 TemplateResult 和 Part 实现细粒度更新。
最容易被忽略的点：模板只是视图描述，变化逻辑永远在 JS 层。哪怕你写一百遍 {{item.name}}，只要数据没进响应式系统，它就永远不会动。
