“This is the 22nd day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
Hello, everyone, I am quick frozen fish π, a river front π¦, like the colorful π, continuous sand sculpture π², is the good brother of the cold grass of the next door. Welcome to add my wechat: Sudongyuer pull you into the group, discuss together, look forward to growing together with you π₯.
Read this article π¦
1. What is an optional chain operator
2. Why is optional chain operator not used in vue3 source code
If you also want to participate in large open source projects, then I suggest you take a look at my article “Vue3 Component Library” how to participate in large open source projects from 0 to 1 to become a contributor π
What is the optional chain operator β
The optional chain operator (? .) allows you to read the value of a property located deep in the chain of connected objects without explicitly validating that each reference in the chain is valid. ? The. Operator functions like the. Chain operator, except that it does not cause errors when references are nullish (null or undefined), and the short-circuit returns undefined. When used with a function call, returns undefined if the given function does not exist.
The optional chain operator makes the expression shorter and more concise when trying to access an object property that may not exist. The optional chain operator is also helpful when exploring the contents of an object if it is not certain which attributes must exist.
const adventurer = {
name: 'Alice'.cat: {
name: 'Dinah'}};constdogName = adventurer.dog? .name;console.log(dogName);
// expected output: undefined
console.log(adventurer.someNonExistentMethod? . ());// expected output: undefined
Copy the codeEffect of short circuit
If? . If the left part is not present, the operation will stop immediately (” short-circuit effect “).
So, if there are any subsequent function calls or side effects, they will not be executed.
let user = null;
let x = 0; user? .sayHi(x++);// no "sayHi", so code execution does not touch x++ alert(x); // 0, the value does not increase
Copy the codeWhy not use such a convenient operator in Vue3 source code
Let’s see if this makes the code cleaner, but why isn’t this PR merged
Personally explained from the University of Utah
(We purposely avoided using optional chains in the code base because we were targeting ES2016 and TS would have converted it into something more verbose)
We can know from the words of UNIVERSITY of Utah that the packaged code of Vu3 is based on ES2016. Although the code looks simpler when we write the code, it actually becomes more redundant after packaging, which will increase the volume of the package and affect the loading speed of Vu3. This shows that a good front-end framework really has a lot to think about, and the syntax is thoughtful ~ β¨
Reference π
- vue-next-pr
- MDN
- What can you learn from giving PR to Vue3
Conclusion π
So why not use vuE3 in my own explanation of the source code? . Optional chain operator will be over, actually very simple, the purpose of the article is about the summary of the daily work and output, output some feel useful things for people, food is not food is not important, but love π₯, hope everyone can like my articles, I am really very attentively in writing, also hope that through articles meet more like-minded friends, if you like, Welcome to add my friends, sand sculpture, progress together.
Making π€ : sudongyu
Personal blog π¨π»: Frozen fish blog
Vx π¦ : sudongyuer
Write in the last
Guys, if you like my words, give ππ a thumbs up π or follow β to support me the most.
Add me on wechat: Sudongyuer, invite you into the group and learning the front together, become a better engineer ~ (group of qr code here – > front to go to bed early, qr code has expired, see the links to the boiling point in the comments, I will put the latest qr code in the comments section, of course, can also add me WeChat I pull you into the group, after all, I also am interesting front end, I also not bad π ~