尤雨溪为什么不在Vue3代码库中使用可选链操作符

·  阅读 4371
尤雨溪为什么不在Vue3代码库中使用可选链操作符

尤雨溪为什么不在Vue3代码库中使用可选链操作符

今天在写代码的时候用到了几次可选链操作符,突然想起去年有人在Vue3代码库提了一个PR用?.换掉&&,但是被关闭了。当时瞄了一眼理由,只说会被转化成复杂的代码,后面就没有再看了,今天突然好奇到底会转成什么样的代码。于是动手试了一下。

什么是可选链操作符

以下是MDN的解释链接[1]

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。

MDN的例子如下

//  不用可选链
let nestedProp = obj.first && obj.first.second;

// 使用可选链
let nestedProp = obj.first?.second;
复制代码

毫无疑问是个极其方便的语法。

Vue3代码库为何不用

我们看一下PR链接[2]。作者提交的修改:

屏幕快照 2022-03-18 下午4.02.25.png

尤大的回复:

屏幕快照 2022-03-18 下午4.02.48.png

翻译: 我们有意避免在代码库中使用可选链,因为我们的目标是 ES2016,而 TS 会将其转换为更加冗长的内容。

那这个更加冗长的内容到底是什么,我使用TS试了一下上面的例子,转成js之后就结果如下

var _a;
let obj = {
    first: {
        second: 2022
    }
};
let nestedProp = (_a = obj.first) === null || _a === void 0 ? void 0 : _a.second;
复制代码

额,可读性太差了。有人可能会有疑问,可选链不是ES6的语法吗?为什么会被转成这个样子?

下面说说我的理解。其实ES6是区别于ES5的一个概念,现在JavaScript每年都有新的提案,ES6指的是ES2015版本,后面有ES2017、ES2018、ES2019等等。而尤大为了兼容一些老版本的浏览器,将Vue3的目标定在了ES2016,而可选链是ES2020的语法,所以会被转换成上面的样子。

我将tsconfig.json的target字段修改为ES2020之后再进行转换,结果如下:

let obj = {
    first: {
        second: 2022
    }
};
let nestedProp = obj.first?.second;
复制代码

与转换前相同。

引用链接

[1] 链接: developer.mozilla.org/zh-CN/docs/…

[2] 链接: github.com/vuejs/core/…

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改