Vue模板中仅允许单个JS表达式，禁止语句；作用域限于组件实例属性；复杂逻辑应提取至计算属性；需注意性能与XSS安全。
Vue.js 模板中支持内联 JavaScript 表达式，但并非任意 JS 代码都能写，它有明确的限制和推荐的书写规范。
只允许单个表达式，不支持语句
模板插值（{{ }}）和指令（如 v-if、v-bind）中只能使用 JavaScript 表达式，不能写语句（如 if、for、let、function 声明等）。
- ✅ 合法：{{ count + 1 }}、{{ message.split('').reverse().join('') }}、{{ isActive ? 'active' : 'inactive' }}
- ❌ 非法：{{ if (count > 0) { return 'positive' } }}、{{ let x = 1 }}、{{ function foo() {} }}
作用域仅限于当前组件实例
模板中的表达式只能访问组件实例的 data、props、computed、methods（仅限调用，不建议在模板中直接调用含副作用的方法）以及一些内置属性（如 $refs、$route 等）。
- 可直接用：{{ userName }}、{{ $route.params.id }}、{{ computedTotal }}
- 不可访问：全局变量（除非显式挂载到 app.config.globalProperties）、外部定义的函数或模块变量
避免复杂逻辑，优先提取到计算属性或方法
模板应保持简洁可读。过长或嵌套过深的表达式会降低可维护性，也影响调试和复用。
立即学习“Java免费学习笔记（深入）”；
- ⚠️ 不推荐：{{ items.filter(i => i.status === 'active').map(i => i.title.toUpperCase()).join(', ') }}
- ✅ 推荐：在 computed 中定义 activeItemTitles，模板中写 {{ activeItemTitles }}
- ? 小技巧：简单三元、逻辑运算（&&、||）、可选链（?. ）和空值合并（??）通常可接受
注意运行时安全性与性能影响
表达式在每次渲染时重新求值，频繁执行耗时操作（如深克隆、正则全局匹配、大量数组遍历）可能引发性能问题；同时，表达式中不应包含用户可控的字符串拼接（防 XSS），尤其避免用 v-html 渲染未经处理的表达式结果。
- 避免：v-html="{{ userContent }}"（若 userContent 来自不可信来源）
- 注意：{{ obj?.nested?.value ?? 'default' }} 是安全且推荐的写法
- 提示：Vue 3 的模板编译器会对静态内容做优化，但动态表达式仍需谨慎设计
