v-model不能写在<template>里，因为<template>是HTML惰性容器，Vue编译器无法扫描其内容，导致响应式依赖未注册、渲染函数未生成，输入框完全不响应数据变化。
为什么v-model不能写在<template>里
因为<template>是原生 HTML 惰性容器，浏览器解析时直接跳过其内容，Vue 编译器根本“看不到”里面写了什么。你写<template><input v-model="msg"></template>，Vue 不会扫描、不会注册响应式依赖、也不会生成渲染函数。
常见错误现象：
- 控制台无报错，但输入框完全不响应数据变化
- 用
document.querySelector('template').content取出节点后插入 DOM，发现v-model失效、事件监听丢失、ref无法绑定 - 误以为
<template>是“可复用的 Vue 片段”，结果 props、computed、watch 全部不生效
data-*属性不是数据绑定入口，只是字符串快照
data-user-id="1024"这类写法只在元素初始化时提供一次性的字符串值，后续修改el.setAttribute('data-user-id', '1025')不会触发任何响应式更新，也不会让 JS 变量自动同步。
关键限制：
立即学习“前端免费学习笔记（深入）”；
-
this.dataset.userId读出来永远是字符串，"true"≠true，"123"≠123，必须显式转换 - 连字符命名自动转驼峰：
data-show-avatar→dataset.showAvatar，但data-UID不会变成dataset.uid - 在自定义元素
constructor()中读dataset虽可行，但此时子节点尚未解析完成，this.innerHTML = ...会出错
框架模板语法（如{{ }}）只在编译阶段起作用
Vue 的{{ msg }}、React 的{message}、Angular 的{{ message }}，都依赖各自模板编译器或 JSX 转换器。它们不是浏览器原生能力，也不在运行时动态解析 HTML 字符串。
这意味着：
- 把
{{ msg }}硬塞进<template>或innerHTML里，它就是纯文本，不会被求值 - 用
document.createElement('div').innerHTML = '<span>{{ msg }}</span>'，得到的只是字面量{{ msg }}，不是渲染结果 - 想让模板语法生效，必须走框架的生命周期：挂载到
el、注入到render()函数、或通过defineComponent()动态创建组件
真正能触发响应式的数据绑定，只发生在框架可控范围内
所谓“可控范围”，是指元素已被 Vue 实例接管（如挂载在el: '#app'下）、或被 React 的useState/useEffect包裹、或由 Angular 的@Input()声明接收。脱离这个上下文，再漂亮的语法也只是静态字符串。
最容易被忽略的一点：
- 用
v-bind:data-id="userId"输出属性，和用dataset.id读取，看似配合，实则断开了响应链——改了userId，DOM 属性会更新，但反过来读dataset.id再赋值给其他状态，就绕过了响应式系统，后续变化不可追踪 - 把配置全塞进
data-*看似轻量，但很快会遇到类型模糊、更新不可控、调试困难的问题
