vuecli中配置 可选链操作符及空值合并

vuecli中配置 es2020 可选链操作符 ?.和空值合并??兼容

可选链，空值合并

1. 安装插件

可选链?. 空值合并 ??
npm install  @babel/plugin-proposal-optional-chaining  @babel/plugin-proposal-nullish-coalescing-operator -D

2. 在.babelrc或babel.config.js中添加插件

module.exports = {
    plugins: [
        '@babel/plugin-proposal-optional-chaining',  // 可选链 ?.
        '@babel/plugin-proposal-nullish-coalescing-operator' // 空值合并 ??
    ]
}

3. 使用示例

let obj = {}
let a = obj ?. user?. name ?? '阿羽' // 阿羽

4. vue版本兼容

当安装完成之后若还是一直报错，请降低 @babel/plugin-proposal-optional-chaining 的版本号，切换版

npm install  @babel/plugin-proposal-optional-chaining@7.13.12 --D

5. 在template中使用（目前Vue默认是不支持在template中使用可选链操作符的，如果我们想要实现可选链操作符类似的效果，需要绕一个弯，具体代码如下）

添加optionalChaining方法

/**
 * 解决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>

\