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中輸出的效果其實是一致的。