尤雨溪解釋vue3源碼為啥不用?.可選鍊式操作符！

什麼是可選鍊式操作符號?

可選鏈運算子( ?. )允許讀取位於連接物件鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。 ?. 運算子的功能類似. 鍊式運算符，不同之處在於，在引用為空(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原始碼中為什麼不使用?.可選鍊式運算子就結束了，文章的目的其實很簡單，就是對日常工作的總結和輸出，輸出一些覺得對大家有用的東西，菜不菜不重要，但是熱愛，希望大家能夠喜歡我的文章，我真的很用心在寫，也希望透過文章認識更多志同道合的朋友，如果你也喜歡折騰，歡迎加我好友，一起沙雕，一起進步。

推薦學習：《最新的5個vue.js影片教學精選》