尤大亲自解释 Vue3 源码中为什么不使用 ?. 可选链式操作符

↓推荐关注↓

什么是可选链式操作符号❓

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

当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有帮助的。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

短路效应

如果 ?. 左边部分不存在，就会立即停止运算（“短路效应”）。

所以，如果后面有任何函数调用或者副作用，它们均不会执行。

let user = null; 
let x = 0; 
user?.sayHi(x++); 
// 没有 "sayHi"，因此代码执行没有触达 x++ alert(x); // 0，值没有增加
复制代码

Vue3源码中为什么不采用这么方便的操作符

看看这样是不是代码更简洁了，但是为什么这个PR没有被合并呢

来自尤大的亲自解释

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

从尤大的话中我们可以得知由于Vu3打包后的代码是基于ES2016的，虽然我们在编写代码时看起来代码比较简洁了，实际打包之后反而更冗余了，这样会增大包的体积，影响Vu3的加载速度。由此可见一个优秀的前端框架真的要考虑的东西很多，语法也会考虑周到～✨

参考资料

[1]

nullish: https://developer.mozilla.org/zh-CN/docs/Glossary/Nullish

[2]

null: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null

[3]

undefined: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined

[4]

vue-next-pr: https://github.com/vuejs/vue-next/pull/4882

[5]

MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining

[6]

给 Vue3 提 PR 可以学到什么: https://www.bilibili.com/video/BV16b4y1t7t8

作者：速冻鱼

https://juejin.cn/post/7033167068895641637

- EOF -

推荐阅读  点击标题可跳转

觉得本文对你有帮助？请分享给更多人

推荐关注「前端大全」，提升前端技能

点赞和在看就是最大的支持❤️