vue2项目中支持可选链 (?.)、双问号 (??)

2022-02-25 17:34:38 阅读：413 来源： 互联网

标签：return target plugin babel chaining 可选链 vue2 proposal 问号

ES2020

Optional Chaining Operator（?.） ：直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。

// 安装依赖  npm install  @babel/plugin-proposal-optional-chaining -S
// @babel/plugin-proposal-nullish-coalescing-operator -S
// 在babel.config.js中  的 plugins中添加 "@babel/plugin-proposal-optional-chaining"

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

温馨提示：<template>中暂时还不支持可选链语法

全局函数 兼容 template 使用
----------------------
// util.js
export default function useOptionChain(target) {
    return new Proxy(target, {
        get:  (target, propKey)=> {
            const proKeyArr = propKey.split('?.')
            return  proKeyArr.reduce((a,b)=>a?.[b],target)
        }
    })
}
----------------------
// *.vue   引入方法
data() {
    return {
        obj: { arr: [ {a:11}, {b:22} ] }
    }
}
methods: {
    useOptionChain,
},

// 模板使用
<div v-if="useOptionChain(obj)['arr?.0?.a']">对象数组</div>
<div v-if="useOptionChain(obj)['arr?.0?.a']">对象数组</div>

标签：return,target,plugin,babel,chaining,可选链,vue2,proposal,问号
来源： https://www.cnblogs.com/qingyanxd/p/15937005.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue2项目中支持可选链 (?.)、双问号 (??)