插值表达式是Vue最基础的数据绑定方式，仅支持返回值的JavaScript表达式，禁用语句、声明、异步操作及副作用；需防范null/undefined访问，HTML渲染须用v-html。

插值表达式是 Vue 最基础、最常用的数据绑定方式，掌握它等于打开了 Vue 开发的大门。只要理解它的语法边界和常见陷阱，基本不会报错，也不需要死记硬背。

插值表达式只能写 JavaScript 表达式，不能写语句

这是初学者最容易踩的坑。双大括号 {{ }} 里只允许写「能返回值」的表达式，比如：

• {{ message }}（变量）
• {{ count + 1 }}（运算）
• {{ message.split('').reverse().join('') }}（方法链）
• {{ isActive ? 'active' : 'inactive' }}（三元运算）

但以下写法会直接报错或静默失败：

• {{ if (count > 0) { return 'yes' } }}（if 是语句，不是表达式）
• {{ let x = 1 }}（let 是声明，不返回值）
• {{ console.log('hello') }}（虽然语法合法，但不推荐，且 Vue 3 中模板中禁止副作用）

避免访问 undefined 或 null 的属性

比如 {{ user.profile.name }}，如果 user 是空对象或 profile 为 null，就会报 Cannot read property 'name' of null/undefined。

立即学习“前端免费学习笔记（深入）”；

解决办法有三种：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 用可选链操作符（Vue 2.6+ / Vue 3 原生支持）：{{ user?.profile?.name }}
• 用逻辑与短路写法（兼容性更好）：{{ user && user.profile && user.profile.name }}
• 在 data 或 setup 中预设默认结构，例如：user: { profile: {} }

插值中不能调用异步函数或 await

你不能写 {{ await fetchUser() }}，因为模板中不支持 await，也不是响应式执行环境。

正确做法是：

• 在 created / mounted（Vue 2）或 onMounted（Vue 3）中请求数据
• 把结果赋给响应式变量（如 data 或 ref）
• 再在插值中直接使用该变量：{{ userName }}

特殊字符和 HTML 渲染要分清

{{ }} 默认是「转义输出」，防止 XSS。比如 {{ '<strong>Hello</strong>' }} 会原样显示字符串，而不是加粗文本。

如需渲染 HTML，请改用 v-html 指令：

• ✅ 安全展示文本：{{ content }}
• ✅ 渲染可信 HTML：v-html="content"
• ❌ 危险写法：{{ rawHtml }}（若内容来自用户输入，可能执行脚本）

记住：插值表达式只负责「读取和格式化」，不负责「获取、等待、修改或渲染 HTML」——这些都有更合适的 API 对应。