一、介绍ES6中js的常用运算符

ES6中js的运算符（?.、?:、? ?、? ?=、），讲的很详细

1、空值合并操作符（ ?? ）

空值合并操作符（ ?? ）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数

const valA = null ?? "默认值"; //默认值

空值合并操作符（ ?? ）与逻辑或操作符（ || ）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。

2、可选链操作符( ?. )

引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined

a?.b
// 等同于
a == null ? undefined : a.b
a?.[x]
// 等同于
a == null ? undefined : a[x]
a?.b()
// 等同于
a == null ? undefined : a.b()
a?.()
// 等同于
a == null ? undefined : a()

3、??= 空赋值运算符
逻辑空赋值运算符 (x ??= y) 仅在 x 是 null 或 undefined 时对其赋值。

let a = 0;
a ??= 1;
console.log(a); // 0
 
let b = null;
b ??= 1;
console.log(b); // 1

4、?:三目运算符
件 ? 条件为真时要执行的表达式 : 条件为假时要执行的表达式。

二、在vue2.0中如何使用

1、直接用?.报错

提示需要添加loader

安装依赖

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

在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                    装饰器 

再用@babel/plugin-proposal-nullish-coalescing-operator插件编译时报错

解决方法

Use of Nullish Coalescing crashes ESLINT (stops linting completely in VS Code)
法一：亲测有效

法二：未测试