html模板本身不监听数据，全靠javascript解析绑定；{{}}表达式需编译提取路径并安全取值；v-model在自定义组件中需显式支持value prop和input事件；contenteditable不支持v-model因其无value属性和原生input语义。
HTML 模板本身不监听数据，所谓“模板监听”，全是 JavaScript 在背后做解析、绑定和响应——浏览器原生不识别 {{ message }} 或 v-model，这些全靠 JS 扫描 DOM、提取表达式、建立依赖关系、拦截赋值来实现。
模板字符串怎么被解析成可执行路径
模板里写 {{ user.profile.name }}，不是浏览器直接查对象属性，而是 Compile 阶段用正则匹配出 user.profile.name 这个字符串，再调用类似 getValue(data, 'user.profile.name') 的函数去安全取值。
- 不能直接
data['user.profile.name']，那会报错或返回 undefined - 必须支持空值穿透，比如
user?.profile?.name或手写递归取值逻辑 - 若字段不存在（如
{{ xxx }}），应静默返回''或undefined，避免TypeError中断整个渲染 - 原始模板字符串必须缓存，否则下次重新编译时，会把已插入的文本（如 “张三”）又当表达式去解析，导致无限循环
v-model 在自定义组件中为什么不是自动生效
原生 input 上的 v-model 是语法糖：v-bind:value + v-on:input。但自定义组件默认不理解这个组合，必须显式约定接口。
- Vue 会把
v-model编译为:value="xxx"+@input="val => xxx = val" - 子组件必须声明
props: { value: String }，并在内部触发this.$emit('input', newValue) - 如果想换事件名（比如用
update:age），就得写成v-model:age+@update:age，同时父组件要手动绑定，不再走默认input事件 - 直接在子组件 template 里对
valueprop 赋值会触发 Vue 警告，因为 props 是只读的
为什么 contenteditable 元素不能直接用 v-model
Vue 的 v-model 指令只支持特定表单元素（input、textarea、select），contenteditable 是普通 div，没有 value 属性，也没有原生 input 事件语义。
- 得用
@input监听（注意：不是原生事件，需配合contenteditable的textContent或innerHTML取值） - 必须手动触发自定义事件（如
this.$emit('input', this.$refs.editable.innerHTML)） - 父组件传入的
valueprop 要通过v-html或textContent渲染，且需防 XSS（尤其用v-html时） - 光标位置、撤销栈、格式保留等行为完全丢失，这不是“加个指令就能双向”的场景
真正难的从来不是写个 Object.defineProperty，而是处理嵌套路径取值边界、事件语义不统一、DOM 更新时机与依赖收集错位——这些细节一旦漏掉，绑定就只在 demo 里跑得通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
