vue2使用可选链操作符（?.）**?.可选链操作符是es11的新特性，引用为空(null 或者 undefined)

**?.可选链操作符是es11的新特性，引用为空(null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined **

obj?.val
// 等同于
obj == null ? undefined : obj.val
obj?.[key]
// 等同于
obj == null ? undefined : obj[key]
obj?.fun()
// 等同于
obj == null ? undefined : obj.fun()
obj?.()
// 等同于
obj == null ? undefined : obj()

如何在vue2中使用

直接用?.编译报错，提示需要添加loader

1.安装依赖

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

2.在babel.config.js中配置

module.exports = {
        plugins: ["@babel/plugin-proposal-optional-chaining"]
}

其他插件

@babel/plugin-proposal-optional-chaining             可选链        ?.
@babel/plugin-proposal-nullish-coalescing-operator   空值合并运算符 ??
@babel/plugin-proposal-object-rest-spread            扩展运算符     ...
@babel/plugin-syntax-dynamic-import                  顶层import
@babel/plugin-proposal-decorators                    装饰器