Vue中使用optionalChaining——可选链（包括在js和template中使用）

对于深层对象结构，判断过于繁琐，如图

 有没有简单的办法呢？

可选链操作符是一个新的js api，它允许读取一个被连接对象的深层次的属性的值而无需明确校验链条上每一个引用的有效性。

标准用法：

const obj = {
  foo: {
    bar: {
      baz: 42,
      fun: ()=>{}
    },
  },
};
 
// 不使用?.
let baz = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz;
 
// 使用?.
let baz = obj?.foo?.bar?.baz; // 结果：42

由于目前可选链仅在提案阶段，浏览器暂时还不支持，因此需要使用babel进行转化，下面，我就来介绍一下在Vue项目中适合在js和template中使用可选链提升我们编码的可读性与效率。

1. 安装babel
2. 在js中使用可选链

export default {
    name: "test",
    data(){
        return {
           userInfo:{}
        }
    },
    created(){
       // 用法1
       console.log(this.userInfo?.wxInfo?.addressInfo?.address)
       // 用法2
       console.log(this.userInfo?.["friends"]?.[0]?.userNAme)
    }
}

 3. 在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 Vue from "vue";
import App from "./App.vue";
import {optionalChaining} from "./utils/index";
 
Vue.prototype.$$ = optionalChaining;
 
new Vue({
  render: h => h(App)
}).$mount("#app");

• 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>
 
<style scoped>
 
</style>