首頁 > 頭條 > 主體

尤雨溪解釋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原始碼中為什麼不採用這麼方便的運算子

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

#看看這樣是不是程式碼更簡潔了,但是為什麼這個PR沒有被合併呢

來自尤大的親自解釋

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

(我們有意避免在程式碼庫中使用可選鏈,因為我們的目標是ES2016,而TS 會將其轉換為更冗長的內容)

從尤大的話中我們可以得知由於Vu3打包後的程式碼是基於ES2016的,雖然我們在寫程式碼時看起來程式碼比較簡潔了,實際打包之後反而更冗餘了,這樣會增大包的體積,影響Vu3的載入速度。由此可見一個優秀的前端框架真的要考慮的東西很多,語法也會考慮周到~

結束語

那麼我的尤雨溪親自解釋vue3原始碼中為什麼不使用?.可選鍊式運算子就結束了,文章的目的其實很簡單,就是對日常工作的總結和輸出,輸出一些覺得對大家有用的東西,菜不菜不重要,但是熱愛,希望大家能夠喜歡我的文章,我真的很用心在寫,也希望透過文章認識更多志同道合的朋友,如果你也喜歡折騰,歡迎加我好友,一起沙雕,一起進步。

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

相關標籤:
來源:juejin.im
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板