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

可选链操作符是一个新的js api，它允许读取一个被连接对象的深层次的属性的值而无需明确校验链条上每一个引用的有效性。目前处于Stage 3提案阶段，暂时不可以直接使用，可以通过babel编译器使用。、

标准用法：

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的安装,babel官方文档有详细介绍，这里就不再赘述：babel-babel-plugin-proposal-optional-chaining
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">{{$$(userInfo,"friends",0,"userName")}}</div>
    </div>
</template>

<script>
    export default {
        name: "test",
        data(){
            return {
                userInfo:{}
            }
        }
    }
</script>

<style scoped>

</style>

输出效果与在js中输出的效果其实是一致的。