Vue模板中{{ }}不支持跨表达式拼接，需在单个表达式内完成如{{a+b}}或{{${a}-${b}}}，注意空值处理、响应性及深层属性安全。
Vue 2 中 {{ }} 表达式不能直接拼接
Vue 2 的模板语法里，{{ }} 是独立的插值表达式，写成 {{ a }}{{ b }} 看似能拼，但实际渲染时中间会有空格或换行（取决于模板缩进），而且无法控制分隔符。这不是“拼接”，只是连续插入两个值。
- 真正想拼字符串，必须在表达式内部完成，比如
{{ a + b }}或{{ a + '—' + b }} - 如果
a或b是 undefined / NULL，+会变成字符串"undefined"或"null"，得提前处理：{{ (a || '') + (b || '') }} - 复杂逻辑别塞在模板里，抽成计算属性更可读、可复用
Vue 3 的 {{ }} 同样不支持跨表达式拼接
Composition API 下模板没变，{{ foo }}{{ bar }} 还是两段独立输出。想拼就得写进一个表达式里，比如 {{ `${foo}-${bar}` }}（注意：模板中支持 es6 模板字面量，但不支持函数调用或解构）。
-
${}里的变量必须已声明在setup()返回对象或ref/reactive中 - 若
foo是 ref，要写{{ `${foo.value}-${bar.value}` }}；否则取到的是对象，拼出来是[Object Object] - 模板中避免长三元或嵌套逻辑，容易出错且难调试
拼接失败的典型错误：空值、类型、响应性丢失
常见现象是页面显示 undefined-123 或 nulltext，甚至整个插值区域空白——往往不是拼接语法错，而是源头数据没准备好。
- 异步数据未设置默认值：
data() { return { user: null } }，然后{{ user.name + user.id }}就崩了 - 用
v-if做兜底比靠|| ''更安全，尤其涉及深层属性：v-if="user && user.profile" - 计算属性里拼接更稳：
fullName: computed(() => `${state.firstName || ''} ${state.lastName || ''}`)
需要动态分隔符？别硬拼，用计算属性或方法
如果分隔符本身也要响应式变化（比如语言切换时从 - 变成 ｜），硬写在模板里会重复、难维护。
立即学习“前端免费学习笔记（深入）”；
- 计算属性最干净：
formattedId: computed(() => [a.value, b.value].filter(x => x).join(separator.value)) - 方法也可，但注意它每次渲染都执行，不如计算属性缓存：
formatId(a, b) { return [a,b].join(this.sep) } - 不要在模板里调
formatId(a, b)时传错引用，比如把ref当原始值传，结果取不到.value
实际项目里，拼接看着简单，但空值处理、响应性链路、模板可读性这三点最容易漏掉。尤其是从后端拿的数据结构深一层，又没配 typescript 类型提示时，user.profile?.name 这种可选链在 Vue 模板里不生效，只能靠计算属性兜住。