data-*属性不是单向绑定，仅是初始化字符串容器；修改不会触发更新，读取需手动类型转换，真正单向数据流需依赖connectedcallback和attributechangedcallback等钩子实现。
data-* 属性不是单向绑定，只是初始化字符串容器
很多人误以为写 data-user-id="1024" 就实现了“单向绑定”，其实它连响应式都算不上。HTML 的 data-* 属性只在元素创建时提供一次性的字符串值，后续修改 el.setAttribute('data-user-id', '1025') 不会触发任何更新逻辑，也不会让 JS 变量自动同步。
常见错误现象：组件渲染后改了 data-config，但内部状态没变；或者读 this.dataset.userId 得到 "1024"（字符串），却直接当数字用导致计算出错。
-
this.dataset.userId永远是字符串，"true"≠true，"123"≠123，必须显式转换 - 连字符命名自动转驼峰：
data-show-avatar→dataset.showAvatar，但data-UID不会变成dataset.uid - 别在
constructor()里操作子节点或依赖dataset渲染内容——此时 DOM 尚未解析完成，子元素不可靠
自定义元素中实现真正单向数据流的时机选择
要在原生 Custom Element 中模拟单向数据流（data → view），关键不是“怎么读 data-*”，而是“什么时候读、怎么映射、怎么更新”。connectedCallback() 和 attributeChangedCallback() 是两个核心钩子，但用途不同。
使用场景：组件挂载后一次性初始化状态，或监听属性变更做响应式更新。
- 用
connectedCallback()做初始化：适合仅需读取一次dataset并渲染模板的场景，比如静态配置类组件 - 用
attributeChangedCallback()做响应式更新：需配合static get observedAttributes()显式声明监听项（注意：监听的是user-id，不是data-user-id） -
attributeChangedCallback(name, oldValue, newValue)中的name是小写连字符形式，比如监听user-id，触发时name === 'user-id' - 手动类型转换必须加 guard：布尔用
newValue === 'true'，数字用parseInt(newValue, 10)，对象/数组建议JSON.parse()+try/catch
v-bind:data-* 和框架内绑定不是一回事
Vue 或 Angular 中写 v-bind:data-id="userId" 或 [attr.data-id]="userId"，只是把当前 JS 值“渲染进 HTML”，生成静态 data-id="1024" 属性。它不参与框架的响应式系统，改了 userId，DOM 上的 data-id 会变，但反过来读 dataset.id 不会触发任何状态更新 —— 这不是绑定，是单次输出。
容易踩的坑：混用 v-bind:data-config 和手动 this.dataset.config 读取，看似省事，实则绕过响应式，后续数据流不可控。
-
v-model、@input、[url]才是真正的绑定入口，data-*不在此列 -
data-*不能替代状态管理，尤其当组件需要频繁更新或跨层级通信时，很快就会失控 - 如果真要用
data-*传配置，建议只用于启动参数（如data-theme="dark"），且组件内部立即转成私有状态，不再反复读取 dataset
单向绑定模板规范的核心是「断开反向通道」
所谓“单向绑定模板规范”，本质是人为切断 view → data 的隐式路径，强制所有状态变更走明确的、可追踪的逻辑出口。这不是靠语法糖实现的，而是靠设计约束。
复杂点在于：你得主动放弃便利性，比如不用 v-model，而改用 @input + :value 组合，并在事件回调里显式调用更新函数；或者在自定义元素中，只允许通过 setAttribute() 修改属性，再由 attributeChangedCallback() 触发内部状态重计算。
最容易被忽略的地方：开发者常把“模板里写了 {{ value }}”当成单向绑定，其实只要没禁用用户输入影响源数据的路径（比如没屏蔽 input 的默认行为、没拦截表单提交），就不是真正的单向流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
