Vue插值动态更新依赖编译解析→生成InterpolationNode→转为响应式getter→track依赖→trigger精准重渲染；禁用语句以保障变量可追踪，逻辑分支需用v-if/computed。
Vue 编译器处理插值表达式的动态更新，核心在于解析 → 生成动态节点 → 响应式依赖收集 → 视图自动重渲染这一闭环流程。它不是靠轮询或手动刷新，而是通过编译阶段的静态分析与运行时的响应式系统协同完成。
插值被识别为 InterpolationNode
在模板解析阶段（如 <p>{{ message }}</p>），Vue 编译器（尤其是 Vue 3 的 parseInterpolation()）会将双大括号内容识别为 InterpolationNode 类型节点，而非普通文本。这个节点明确标记为「动态内容」，并携带原始表达式字符串（如 "message"）。
表达式被编译为渲染函数中的 getter 调用
后续编译过程会把插值转换成渲染函数里的响应式访问代码。例如：
-
{{ message }}→ 编译为ctx.message（Vue 3 Composition API 下）或instance.proxy.message（Options API） -
{{ count * 2 + 1 }}→ 编译为ctx.count * 2 + 1，其中ctx.count是一个响应式 getter
关键点：每次访问 ctx.message 时，Vue 的响应式系统（track()）会记录当前渲染函数（effect）对 message 的依赖。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
数据变化触发精准更新
当 message 被修改（如 data.message = 'Hi'），其 setter 内部会调用 trigger()，通知所有依赖它的 effect 重新执行。由于插值只绑定到 message 这一个响应式属性，所以只有包含该插值的 DOM 片段会被最小化更新，不涉及整棵树重绘。
不支持语句，确保可追踪性
插值中禁止使用 if、for、赋值语句（如 {{ a = 1 }}）等，根本原因在于：编译器需要能静态提取出「被读取的响应式变量名」，才能建立依赖关系。复杂语句无法可靠解析变量依赖，会破坏响应式链条。
遇到逻辑分支，应改用 v-if / v-for 指令，或封装进计算属性（computed）——它们同样被编译器识别并纳入响应式追踪体系。
