首页 > 头条 > 正文

尤雨溪解释vue3源码为啥不用?.可选链式操作符!

藏色散人
发布: 2021-12-29 16:02:20
转载
3590 人浏览过

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

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(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源码中为什么不采用这么方便的操作符

85729503fb322e427d2c9968831088c.png

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

来自尤大的亲自解释

2b836fdce8684914f9acfd13d8f2ced.png

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

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

结束语

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

推荐学习:《最新的5个vue.js视频教程精选

相关标签:
来源:juejin.im
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板