Vue2 模板中使用可选链操作符（?.）的坑
问题描述
最近在赶一个 Vue2 项目，写代码时遇到了一个让我抓狂的问题。事情是这样的：
我正在写一个用户列表组件，需要显示用户的收货地址。大家都知道，用户数据可能不完整，所以我在模板里用了可选链操作符（?.）来安全地访问嵌套属性：
<template><div><span>{{ user?.address?.street }}</span></div>
</template>
结果一保存，控制台就给我报错了：
Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
SyntaxError: Unexpected token .
我当时就懵了：这代码在 JavaScript 里明明可以正常工作啊！为什么在模板里就不行了？
排查过程
作为一个被 Bug 折磨多年的老码农，我开始了我的"侦探之旅"：
-
先怀疑是语法写错了：
- 检查了语法，确认没问题
- 在 JavaScript 里测试，确实可以工作
- 好吧，不是语法问题
-
怀疑是 Vue 版本问题：
- 检查了 Vue 版本，是 2.6.x
- 查了文档，Vue2 确实支持可选链
- 但文档说的是 JavaScript 部分，没说模板部分
-
终于想到了编译过程：
- Vue2 的模板和 JavaScript 编译过程是不同的
- 模板是用 vue-template-compiler 编译的
- 这个编译器可能不支持可选链
这感觉就像在茫茫代码海洋中找到了那个导致编译错误的语法特性一样爽！
问题根源
经过一番"审问"，确定问题出在 Vue2 的模板编译器上。这个编译器是基于 ES2015（ES6）规范的，而可选链操作符（?.）是 ES2020 的特性。
抱着"肯定不止我一个人遇到这问题"的心态，我去 GitHub 上搜了一下，果然发现了几个相关 issue。
看到有人跟我遇到一样的问题，那种感觉，懂的都懂…
解决方案
根据我的实验和社区讨论，有几种解决方案：
1. 使用计算属性（推荐）
<template><div><span>{{ userStreet }}</span></div>
</template><script>
export default {computed: {userStreet() {return this.user?.address?.street}}
}
</script>
优点：
- 代码清晰易维护
- 支持缓存
- 性能优化
2. 使用方法
<template><div><span>{{ getUserStreet() }}</span></div>
</template><script>
export default {methods: {getUserStreet() {return this.user?.address?.street}}
}
</script>
优点：
- 逻辑复用
- 支持参数传递
- 便于测试
3. 使用工具函数
// utils/safeAccess.js
export const safeGet = (obj, path) => {return path.split('.').reduce((acc, part) => acc?.[part], obj)
}// 使用
<template><div><span>{{ safeGet(user, 'address.street') }}</span></div>
</template>
优点：
- 高度可复用
- 统一处理逻辑
- 便于维护
4. 使用三元运算符
<template><div><span>{{ expectOutDateList[0] ? expectOutDateList[0].expectOutTime : '' }}</span></div>
</template>
优点：
- 代码直观易懂
- 不需要额外的方法或计算属性
- 适合简单的条件判断
缺点：
- 嵌套层级多时可能影响可读性
- 不适合复杂的逻辑判断
- 重复的表达式可能影响性能
原因分析
从技术角度分析，Vue2 的模板编译器不支持可选链操作符，主要是因为：
-
编译过程不同：
- JavaScript 代码用 Babel 编译，支持新特性
- 模板用 vue-template-compiler 编译，只支持到 ES2015
-
性能考虑：
- 复杂的语法解析会增加编译时间
- 链式操作可能影响渲染性能
经验总结
这次排查经历让我又积累了一点经验：
-
不要想当然：JavaScript 能用的特性，模板不一定能用。就像这次的可选链操作符，在模板里就不行。
-
多查文档：Vue 的文档虽然详细，但有些细节还是得自己踩坑才知道。
-
社区是个宝库：遇到问题先去 GitHub、Stack Overflow、CSDN 等地方搜一搜，很可能别人已经踩过这个坑了。
-
保持代码简洁：模板里尽量少写复杂逻辑，该封装的就封装。
写在最后：关于编程的思考
经历了这次排查问题的过程，我又一次体会到了编程的乐趣。说实话，我们这一行，与其说是写代码，不如说是解决问题。
代码只是我们表达解决方案的媒介，而真正的核心能力是发现问题、分析问题和解决问题。就像这次的模板编译问题，表面上看是个简单的"语法错误"，但背后涉及到编译原理、性能优化等多方面的知识。
在当今这个技术飞速发展的时代，编程语言、框架、工具可能几年就会更新换代，但问题解决的思维方式和能力却是恒久不变的。那些能在行业中长期立足的程序员，往往不是因为他们记住了多少语法或 API，而是因为他们具备了强大的问题解决能力。
希望我的这点经验能帮到同样遇到问题的你。毕竟，在程序员的世界里，我们不仅解决自己的问题，也通过分享帮助他人解决问题，这才是技术社区的真谛。
参考资料：
-
Vue2 官方文档 - 模板语法
-
MDN - 可选链操作符