vue2.X使用可选链操作符编译报错问题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

可选链操作符是ES2020中推出的新语法，允许我们不需要校验当前属性的类型去尝试访问子属性。 const a = b?.c?.d

npm install --save-dev @babel/plugin-proposal-optional-chaining -S    //解析可选链语法插件
npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator    // 双问号语法插件

一、为什么要使用可选链操作符

    在Vue项目中, 经常会遇到一个问题,就是比如你在data中定于某个变量 personalInfo:null。 然后在html中
要用到user里面的深层属性,比如<div>{{personalInfo.userIno.name.}}</div>, 页面初始化加载的时候接口信
息没返回,personalInfo会报错name属性不存在等问题，也的确如此,因为此时personalInfo为null,访问不存在的
属性肯定会报错。

    有些人会在<div v-if="personalInfo">{{personalInfo.userIno.name.}}</div>,当personalInfo
为true的时候, 说明此时数据已经返回了,此时可以正常渲染,没有问题。但是很low的野路子。

   也有些人的做法是<div>{{personalInfo.userIno?personalInfo.userIno.name:""}}</div>等利用三元操作
符来搞,这种不是说存在问题,但是当属性层次较深的时候,会连续些写三元操作符,写的又臭又长,无法直视。

  那么此时就可以使用可选链操作符来解决深层属性访问不到的问题,代码简短，方便快捷。

二、安装babel

为什么要安装babel?
     于目前可选链仅在提案阶段,浏览器暂时还不支持,因此需要使用babel进行转化,在Vue项目
中适合在js和template中使用可选链提升我们编码的可读性与效率。

1、安装@babel/plugin-proposal-optional-chaining, 这个是解析可选链的
     npm install @babel/plugin-proposal-optional-chaining --save-dev
     
2、在babel.config.js中添加@babel/plugin-proposal-optional-chaining:
   module.exports = {
      presets: ['@vue/app'],
      plugins: ["@babel/plugin-proposal-optional-chaining"]
    }
     

三、在template使用可选链操作符

此时可以在JS里面使用可选链操作符了,但是在template里面使用依然报错,
原因是目前Vue默认是不支持在template中使用可选链操作符的，如果我们想要实现可选链操作符类似的效果，
需要绕一个弯。

utils.js：

/**
 * 解决Vue Template模板中无法使用可选链的问题
 * @param obj
 * @param rest
 * @returns {*}
 */
export const optionalChaining = (obj, ...rest) => {
  let tmp = obj;
  for (let key in rest) {
    let name = rest[key];
    tmp = tmp?.[name];
  }
  return tmp || "";
};

main.js

import {optionalChaining} from "./utils/index";
Vue.prototype.$$ = optionalChaining;

template中使用

<template>
    <div class="container">
        <div class="username">
		<!-- 此处显示Mars 当userInfo没有属性时也不会报错-->
        {{$$(userInfo, 'wxInfo', 'addressInfo', 'address')}}
        </div>
    </div>
</template>
 
<script>
    export default {
        name: "test",
        data(){
            return {
               userInfo: {
        		wxInfo: {
          			addressInfo: {
            			address: 'Mars'
          				}
        			}
      			}
            }
        }
    }
</script>

四、总结

在Vue2.X里面默认不支持，需要babel进行编译，在Vue3里面好像可以使用了，不需要经过任何配置了。