尤大亲自解释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源码中为什么不采用这么方便的操作符
看看这样是不是代码更简洁了,但是为什么这个PR没有被合并呢
来自尤大的亲自解释
(我们有意避免在代码库中使用可选链,因为我们的目标是 ES2016,而 TS 会将其转换为更加冗长的内容)
从尤大的话中我们可以得知由于Vu3打包后的代码是基于ES2016的,虽然我们在编写代码时看起来代码比较简洁了,实际打包之后反而更冗余了,这样会增大包的体积,影响Vu3的加载速度。由此可见一个优秀的前端框架真的要考虑的东西很多,语法也会考虑周到~✨
参考 📚
结束语 🌞
那么我的尤雨溪亲自解释vue3源码中为什么不使用?.可选链式操作符
就结束了,文章的目的其实很简单,就是对日常工作的总结和输出
,输出一些觉得对大家有用的东西,菜不菜不重要,但是热爱🔥,希望大家能够喜欢我的文章,我真的很用心在写,也希望通过文章认识更多志同道合的朋友,如果你也喜欢折腾
,欢迎加我好友
,一起沙雕
,一起进步
。
github🤖:sudongyu
个人博客👨💻:速冻鱼blog
vx👦:sudongyuer
写在最后
伙伴们,如果喜欢我的口水话
给🐟🐟点一个赞👍或者关注➕都是对我最大的支持。
加我微信:sudongyuer,邀你进群,一起学习前端,成为更优秀的工程师~(群二维码在这里->前端要早睡, 二维码过期了的话看链接沸点中的评论,我会把最新的二维码放在评论区,当然也可以加我微信我拉你进群,毕竟我也是有趣的前端,认识我也不赖🌟~
转载自:https://juejin.cn/post/7033167068895641637