vue中使用链判断运算符

编程实务中，如果读取对象内部的某个属性，往往需要判断一下该对象是否存在。比如，要读取message.body.user.firstName，安全的写法是写成下面这样：

const firstName = (message && message.body && message.body.user && message.body.user.firstName)  || 'default'

这样的层层判断非常麻烦，因此ES2020引入了“链判断运算符”，写法如下：

const first = message?.body?.user?.firstName || 'default'

vue中使用链判断运算符：

1、下载@babel/plugin-proposal-optional-chaining

npm install --save-dev @babel/plugin-proposal-optional-chaining

2、在你的vue项目里的babel.config.js添加如下代码来拓展解析器

module.exports = { presets: [ '@vue/app', ], plugins:[ "@babel/plugin-proposal-optional-chaining" ] }

3、重启项目，一定要重启项目，然后就可以愉快的使用了。