vue安装babel使用es2020新语法

先说明一下，es2020新语法只能用在js文件中,不能用在vue文件中

1.操作运算符：??

当左侧操作数为 null 或 undefined 时，其返回右侧的操作数，否则返回左侧的操作数。与逻辑或 || 运算符不同的是，逻辑或会在左操作数为 假值 时返回右侧操作数，可能会遇到隐式类型转换造成意外情况（如左侧操作数为 ’ ’ 或 0 时）

const foo = null ?? 'default string';
console.log(foo); // "default string"

const baz = 0 ?? 42;
console.log(baz); // 0

const baz2 = 0 || 42;
console.log(baz2); // 42

插件安装： 

npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator

使用介绍：

// babel.config.js
{
    "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}

2.可选链?.

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined

const obj = {
  foo: {
    bar: {
      baz: 666,
      fun: ()=>{}
    },
  },
};

// 不使用?.
let baz = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz;

// 使用?.
let baz = obj?.foo?.bar?.baz; // 结果：666

插件安装 :

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

使用介绍：

// babel.config.js
{
    "plugins": ["@babel/plugin-proposal-optional-chaining"]
}