vue项目安装babel巧用es2020新语法

深藏阁楼爱情的钟 2021-09-07 15:18 550阅读 0赞

*  操作运算符：??
    
    对应babel插件：@babel/plugin-proposal-nullish-coalescing-operator
    
    方法介绍：当左侧操作数为 null 或 undefined 时，其返回右侧的操作数，否则返回左侧的操作数。与逻辑或 || 运算符不同的是，逻辑或会在左操作数为 假值 时返回右侧操作数，可能会遇到隐式类型转换造成意外情况（如左侧操作数为 ’ ’ 或 0 时）
    
        const foo = null ?? 'default string';
        console.log(foo); // "default string"
        
        const baz = 0 ?? 42;
        console.log(baz); // 0
        
        const baz2 = 0 || 42;
        console.log(baz2); // 42
    
    安装介绍：
    
        npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator
    
    使用介绍：
    
        // babel.config.js
        { 
            "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
        }
 *  操作运算符：?.
    
    对应babel插件：@babel/plugin-proposal-optional-chaining
    
    方法介绍：允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined
    
        const obj = { 
            foo: { 
                bar: { 
                    baz: 42,
                },
            },
        };
        
        const baz = obj?.foo?.bar?.baz; // 42
        
        const safe = obj?.qux?.baz; // undefined(因为字段不存在，会返回undefined，而不会报错)
    
    小技巧：如果有个对象obj，需要在很多地方使用插值表达式去使用某个字段，如\{ \{ obj.name \}\}、\{ \{ obj.age \}\}，但是担心某个字段不存在会抛出错误，可以使用过滤器+?.操作符避免错误
    
        <td>{ {  obj.domainOut | dataExceptionHandler('name') }}</td>
        
        Vue.filter('dataExceptionHandler', (obj, attribute) => { 
            return obj?.[attribute];
        });
    
    安装介绍：
    
        npm install --save-dev @babel/plugin-proposal-optional-chaining
    
    使用介绍：
    
        // babel.config.js
        { 
            "plugins": ["@babel/plugin-proposal-optional-chaining"]
        }

以上babel插件不能在vue组件的template部分使用，只能在script部分使用，即只能在js部分中使用，但是可以使用计算属性/过滤器进行取巧使用。

更多babel插件：[https://www.babeljs.cn/docs/plugins][https_www.babeljs.cn_docs_plugins]

如有问题，请指出，接受批评。

![在这里插入图片描述][20210505195207588.jpg_pic_center]

[https_www.babeljs.cn_docs_plugins]: https://www.babeljs.cn/docs/plugins
[20210505195207588.jpg_pic_center]: /images/20210813/78df55b738fc4506aa0c66aaf6cd3d8e.png