在vue中使用ES6新增功能链判断和合并运算符,如下代码
// 链判断
let obj = {}
if (obj?.name) {
console.log("是否存在name属性")
}
// 合并运算符 判断是否为 null 或 undefined
if (value1 ?? value2) {
}
在vue中这样使用会报错,原因是在解析过程中无法解析?.或??,需要在配置babel相应配置,如下。
安装改babel插件
// 链判断
npm
npm install --save-dev @babel/plugin-proposal-optional-chaining
yarn
yarn add @babel/plugin-proposal-optional-chaining --dev
// 合并运算符
npm
npm install @babel/plugin-proposal-nullish-coalescing-operator --save
yarn
yarn add @babel/plugin-proposal-nullish-coalescing-operator --save
在根目录下babel.config.js或.babelrc文件中的plugins添加该插件。
{
"presets": [
"@vue/app"
],
"plugins": [
// 链判断
"@babel/plugin-proposal-optional-chaining"
// 合并运算符
'@babel/plugin-proposal-nullish-coalescing-operator'
]
}
重启项目即可使用ES6中链判断和合并运算符。