记录 使用可选链plugin-proposal-optional-chaining

obj.a && obj.a.b
//使用plugin后可写成
obj?.a?.b

第一步 安装
npm install --save-dev @babel/plugin-proposal-optional-chaining

然后在.babelrc.js文件夹里进行配置
plugins:"@babel/plugin-proposal-optional-chaining",

这样在我们script中就可以使用上面说的方法
但是我们使用Vue js的时候更多的场景是在template
在模板中我们是否可以使用可选链操作Object呢?
答案是不行的 因为Vue的template里的语法使用Buble转移的
虽然ES11已经正式支持了安全的链式操作
Optional chaining:新运算符?.能够在属性访问、方法调用前检查其是否存在
Nullish coalescing Operator:用来提供默认值的新运算符??
但是由于浏览器的兼容问题 我们还不能愉快的使用这个方法
那么在template我们应该如何使用呢

MixinGetObjKey() {
      if (!arguments[0]) return '';
      let state = arguments[0];
      for (let i = 1; i < arguments.length; i++) {
        state = state[arguments[i]];
        if (!state) {
          state = '';
          return '';
        }
      }
      return state;
    },

我们可以使用此方法来解决对象属性不存在的时候报错的问题
使用方法v-if=MixinGetObjKey('obj','a','b')