Vue模板中插值表达式{{ }}仅支持单个表达式，禁止语句和赋值；复杂逻辑应抽至computed；默认转义HTML防XSS，渲染HTML需v-html；属性绑定须用v-bind而非{{ }}。
Vue 模板中的插值表达式（{{ }}）是数据绑定最直观的方式，但不是所有 JavaScript 写法都能直接往里塞。用对了清爽高效，滥用则埋下可维护性、性能甚至安全风险。
只允许单个表达式，禁止语句和赋值
插值内只能写能求出一个值的表达式，比如变量、运算、三元判断、方法调用、可选链等。不能出现 if、for、function、let/const、= 这类语句或声明。
- ✅ 正确：{{ count + 1 }}、{{ user?.name || '匿名' }}、{{ isActive ? '启用' : '停用' }}
- ❌ 错误：{{ if (count > 0) { ... } }}、{{ let x = 1 }}、{{ doSomething() }}（除非该方法无副作用且纯返回）
不推荐在插值中写复杂逻辑
哪怕语法上合法，像 {{ firstName.toUpperCase() + ' ' + lastName.trim().split(' ')[0] }} 这类写法也应避免。它难读、难调试、无法复用，且每次渲染都重新执行。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 建议把这类逻辑抽到 计算属性（computed） 中，例如定义 fullName，再写 {{ fullName }}
- 涉及异步、格式化、权限判断等场景，更应交给方法或 computed，而非模板内硬编码
注意文本与 HTML 的区别
{{ }} 默认输出为纯文本，会自动转义 HTML 字符（如 < 显示为文字，而非标签）。若真需渲染 HTML，必须用 v-html 指令，且仅限可信内容。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全展示：{{ article.title }} —— 自动防 XSS
- ⚠️ 风险操作：<div v-html="article.content"></div> —— 若 content 来自用户输入，可能执行恶意脚本
属性绑定不能用 {{ }}，要用 v-bind
HTML 标签的 attribute（如 class、href、disabled）不支持双大括号语法。必须用 v-bind:（或简写 :）来动态绑定。
- ✅ 正确：
<a :href="url">链接</a>、<img :src="avatar" :alt="name"> - ❌ 错误：
<a href="{{ url }}">链接</a>—— Vue 会忽略，浏览器按字面渲染 "{{ url }}"
