vue项目安装babel巧用es2020新语法

• 操作运算符：??

  对应babel插件：@babel/plugin-proposal-nullish-coalescing-operator

  方法介绍：当左侧操作数为 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"]
  }
  

• 操作运算符：?.

  对应babel插件：@babel/plugin-proposal-optional-chaining

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

  const obj = {
      foo: {
          bar: {
              baz: 42,
          },
      },
  };
  
  const baz = obj?.foo?.bar?.baz; // 42
  
  const safe = obj?.qux?.baz; // undefined(因为字段不存在，会返回undefined，而不会报错)
  

  小技巧：如果有个对象obj，需要在很多地方使用插值表达式去使用某个字段，如{{ obj.name }}、{{ obj.age }}，但是担心某个字段不存在会抛出错误，可以使用过滤器+?.操作符避免错误

  {{ obj.domainOut | dataExceptionHandler('name') }}
  
  Vue.filter('dataExceptionHandler', (obj, attribute) => {
      return obj?.[attribute];
  });
  

  安装介绍：

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

  使用介绍：

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

以上babel插件不能再vue组件的template部分使用，只能在script部分使用，即只能在js部分中使用，但是可以使用计算属性/过滤器进行取巧使用。

更多babel插件：https://www.babeljs.cn/docs/plugins

如有问题，请指出，接受批评。

QQ图片20210505195155.jpg