vue2使用可选链操作符（?.）

2024-09 0

xx?.xx可选链操作符是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

这里需要注意的是，

  • Babel 6 和 Babel 7 是两代完全不同的工具链。Babel 6 的插件与 Babel 7 的插件使用不同的命名空间。
  • Babel 6 的插件是以 babel-plugin- 为前缀，而 Babel 7 插件是以 @babel/plugin- 为前缀。
  • @babel/plugin-proposal-optional-chaining 只属于 Babel 7，它没有 6.x 版本。
    我们当前项目用的是babel7才能使用该插件，如果是6的话，目前还没找到好的方式。这里有一个关于可选链不适用bable6的讨论
    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                    装饰器
  • Vue2