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

·  阅读 22924
尤大亲自解释vue3源码中为什么不使用?.可选链式操作符🐣

「这是我参与11月更文挑战的第22天,活动详情查看:2021最后一次更文挑战

大家好,我是速冻鱼🐟,一条水系前端💦,喜欢花里胡哨💐,持续沙雕🌲,是隔壁寒草🌿的好兄弟。
欢迎小伙伴们加我微信:sudongyuer拉你进群,一起讨论,期待与大家共同成长🥂。

阅读本文🦀

1.什么是可选链式操作符号

2.为什么vue3源码中不使用可选链式操作符

如果你也想参与大型开源项目,那么我建议你可以看一下我的这篇文章「vue3组件库」如何从0到1参与大型开源项目成为贡献者🎃

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

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 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源码中为什么不采用这么方便的操作符

image-20211114120351836

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

来自尤大的亲自解释

image-20211114120545284

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

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

参考 📚

结束语 🌞

86e444a8880c11ebb6edd017c2d2eca2

那么我的尤雨溪亲自解释vue3源码中为什么不使用?.可选链式操作符就结束了,文章的目的其实很简单,就是对日常工作的总结和输出,输出一些觉得对大家有用的东西,菜不菜不重要,但是热爱🔥,希望大家能够喜欢我的文章,我真的很用心在写,也希望通过文章认识更多志同道合的朋友,如果你也喜欢折腾,欢迎加我好友,一起沙雕,一起进步

github🤖:sudongyu

个人博客👨‍💻:速冻鱼blog

vx👦:sudongyuer

写在最后

伙伴们,如果喜欢我的口水话给🐟🐟点一个赞👍或者关注➕都是对我最大的支持。

加我微信:sudongyuer,邀你进群,一起学习前端,成为更优秀的工程师~(群二维码在这里->前端要早睡, 二维码过期了的话看链接沸点中的评论,我会把最新的二维码放在评论区,当然也可以加我微信我拉你进群,毕竟我也是有趣的前端,认识我也不赖🌟~

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