“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 code

Effect 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 code

Why 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 🌟 ~