尤雨溪为什么不在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]。作者提交的修改:
尤大的回复:
翻译: 我们有意避免在代码库中使用可选链，因为我们的目标是 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及其之后的版本。而尤大为了兼容一些老版本的浏览器，将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/…