Vue模板的本质是什么
Vue模板是一段声明式的 HTML 扩展语法，最终会被编译成渲染函数。它允许开发者用接近原生 HTML 的方式描述 UI 与数据的关系，而不必手写 createElement 或 JSX。
模板不是字符串拼接，而是有明确编译规则的表达式。理解这一点，才能避免把模板当普通 HTML 使用。
插值与指令的基础用法
最常用的插值是双大括号：
{{ message }}
插值内部只能写单个表达式，不能写语句或 if 分支。复杂逻辑应放入计算属性或方法。
指令以 v- 开头，常见的有：
v-bind：绑定属性，简写:v-on：绑定事件，简写@v-if/v-show：条件渲染v-for：列表渲染v-model：表单双向绑定
v-if 与 v-show 的选择
v-if 是真实的条件渲染，切换时销毁与重建 DOM；v-show 只切换 display 样式。频繁切换用 v-show，初始条件很少为真用 v-if。
计算属性与侦听器的分工
计算属性适合根据已有响应式数据派生新值，有缓存，依赖不变不会重新计算。侦听器适合在数据变化时执行副作用，比如请求接口或操作 DOM。
不要在模板里写复杂表达式，比如：
{{ list.filter(item => item.active).map(item => item.name).join(‘,’) }}
这种写法每次重渲染都会执行，应改为计算属性。
v-for 的性能陷阱
v-for 必须配合 key 使用，且 key 要稳定唯一，不要用索引。索引作为 key 在列表顺序变化时会导致复用错误，产生状态错乱。
同时避免 v-if 与 v-for 在同一元素上使用。Vue 2 中 v-for 优先级更高，Vue 3 中 v-if 优先级更高，两者行为不一致，容易写出 bug。正确做法是把 v-if 移到外层容器或使用计算属性过滤。
模板编译与运行时优化
Vue 3 的模板编译会做静态提升和补丁标记。静态节点被提升到渲染函数外，更新时跳过比对。这意味着：
- 尽量保持模板结构稳定
- 动态绑定越少，编译优化空间越大
- 避免在模板中创建新对象或数组字面量
常见误区
第一，在模板中直接修改 props 或使用 this 访问未声明变量。第二，过度使用 v-html，带来 XSS 风险。第三，把大型列表全部渲染，没有虚拟滚动或分页。
Vue 模板的简洁是优势，但简洁不等于可以忽略底层机制。理解编译结果与响应式依赖收集，才能写出既清晰又高效的模板。
