跳到主要內容

【2020 COSCUP】Vue 作者尤雨溪分享 現場座無虛席

 【2020 COSCUP】Vue 作者尤雨溪分享 現場座無虛席

2020 COSCUP 第二天的重頭戲兼開場為主辦單位邀請到 Vue 作者—尤雨溪與現場會眾分享即將正式上線的 Vue 3 與個人開源心得。現場座無虛席並且與會眾問答的來回問答十分精彩,文中也邀請到台灣最大的 Vue 社群「Vue.js Taiwan 台灣」的 Kuro Hsu 做 Vue 的簡單懶人包。


COSCUP 第二天的開場為主辦單位邀請非常多次重量級來賓 Vue 作者尤雨溪(Evan You),而今年雖因為疫情關係,Evan 無法來到現場,但恰好搭配著 Vue 3 釋出的熱度,一早就湧進大量人潮。


目前 COSCUP 主辦單位已完整的將影片釋出到網路上囉!有興趣的網友們可點網址觀看:https://youtu.be/Z-i7VY-ez2Q

COSCUP 工作人員也邀請到了台灣最大的 Vue 社群「Vue.js Taiwan 台灣」的 Kuro Hsu 為我們摘錄本次演講與 Vue 3 最精華與懶人包的內容(註:演講時間為 2020 年 8 月 2 日,可能與最新版本有不同,以最新釋出的版本消息為主唷!),若想討論 Vue 的技術與內容的話,也可以加入「Vue.js Taiwan 台灣」與他們一起討論喔!(社團連結:https://www.facebook.com/groups/vuejs.tw)


---

小編問題(一):7/18 release Vue 3(註:此為 Release Candidate、或稱 RC 版本,非正式版)和以往最大的改變(三個):


Kuro 回答:


  1. Vue.js 以往版本 (v1、v2) 的核心底層是以 JavaScript 來開發,而型別檢測系統在 Vue 2 以來一直都有,底層是透過 Flow.js 來實作。


尤雨溪在演講中提及,首先是在近年的前端領域裡,使用 TypeScript 來開發的人越來越多, 而這點對 Vue 2.x 來說對 TS 的支援顯然是不足的;再來是 Flow.js 原本是 facebook 團隊開發用來作為檢查工具,並不是新的程式語言或超集語言, 而 Vue 3.0 底層改用 TypeScript 除了同樣能做到原本 Flow.js 的功能,並且在經過編輯器的整合 (如 VSCode) 甚至可以做到程式碼的即時檢查以及自動補完的提示等功能。 另外,TypeScript 團隊也與 Vue 作者有多次的討論與技術的支援,TypeScript 是否是主流相信不是 Vue 最主要考慮的原因, 而是 TypeScript 團隊積極擁抱社群,聽取並採納社群的意見,這才漸漸成為前端主流。


  1. Proxy-based Reactive Link Text


過去 Vue.js 是採用 ES5 的 Object.defineProperty 來作為資料更新檢測的依據,而 Vue 3.0 則以過去為基礎,更進一步改用 ES6 的 Proxy API。 原因是過去使用 Object.defineProperty 需要針對每一個要監測的狀態加上 getter / setter,而 ES6 Proxy 則無須像過去一個一個為每個屬性加上 getter / setter, 而是透過代理的方式,一次就可以直接監聽狀態物件的存取更新,效率比起過去來得更好,代價就是老舊瀏覽器的支援程度較差。 (就是 IE 不支援啦)


  1. Virtual DOM rewrite for better performance


如上題所述,過去由於 Vue.js 的更新檢測是透過 getter / setter 來做到更新的最小化,所以無需透過迴圈式的 dirty-checking 來做到組件的更新, 但是在單個組件內部的 Virtual DOM 仍需遍歷整個 VDOM 的各個節點來進行比對,如果這個組件裡的動態節點並不多,那麼就會造成多餘的檢查以及效能的浪費。


Vue 3.0 對 Virtual DOM 的重構,會將模板切分成一個個的巢狀區塊,每個區塊的節點結構是固定的, 且只需要透過一個陣列來記錄與追蹤其所包含的動態節點部分。 這樣一來, VDOM 的更新效率則與模板最終的大小無關,而是由組件內動態節點的多寡來決定。 簡單來說,只有動態節點的部分才會進行 VDOM 的重新渲染,這樣就可以做到整體效能的大幅提升。


小編問題(二):Vue 3 release 之後與其他相比最大的優勢是?會不會導致更多人使用?


Kuro 回答:


不跟別人比,就拿 Vue 2.x 來說,同樣功能的程式在 Vue 3.0 的執行效能更快、打包後的程式碼更小, 在開發體驗上,由於採用了 TypeScript,即使開發者不用 TypeScript 來進行開發,也同樣能享受 TypeScript 帶來的好處 (型別檢查、程式碼自動補完等)。 同時,因為採用了 Composition API,更可以減少過去 mixins 所造成的資料衝突,狀態來源不明等問題, 更不用說還從 React 陣營借鑒像是 Portals、Suspense 等新功能,都是非常實用的。

就我個人的看法,即使是在 Vue 3 正式推出後,雖然不見得會吸引其他陣營 (如 React、Angular 等) 立刻將手上專案轉過來改寫, 但正在對為新專案挑選框架的開發者來說,是很有吸引力的。


小編問題(三):若要從 Vue 2.0 升級到 3.0 的須知或建議


Kuro 回答:



首先要考慮的是對舊瀏覽器的支援,如果專案需要支援到老舊瀏覽器 (對就是在說 IE),那麼可能就不適合升級到 Vue 3.0,可以等待 Vue 2.7 的推出做為過渡期的轉換。 而若專案使用過多第三方所開發的 Vue 2.x plugins,也要注意那些 plugins 是否在近期內有升級支援 Vue 3.0 的打算,或是尋求替代品。

如果沒有上述問題,那麼建議可以從小型專案或自己的 side project 開始嘗試 Vue 3.0 的升級, 尤其現在 Vue-cli / vite 等工具已經可以支援直接以 3.0 作為新專案的啟動,或是也可以利用 Vue-cli 來做升級,搭配 vue-cli-service lint 工具,都會有新版本相關的建議與提示。 相信這次的 3.0 版本不會讓你失望的。


如果有更多問題想討論,歡迎加入「Vue.js Taiwan 台灣」與一起討論喔!

留言

這個網誌中的熱門文章

COSCUP 啄事今蜚會前快報 第一期

COSCUP 啄事今蜚會前快報 第一期 2014年06月18日發行 距離大會剩下一個月的時間, 精彩的議程內容即將就定位,讓小啄帶大家來看看今年有些什麼精彩的吧! 從沒有人到超多人: g0v社群經驗 g0v.tw 是一個跨界的開源社群,由一些熟悉軟體開源文化的人開始,從最初期就致力拓展到其他非資訊領域,因此在社群的推動上有各種不同努力。將近兩年來,關注社群人數爆炸性成長,社群因此經歷數次危機。但透過 g0v 與NGO、政府等實體組織互動、加強社群基礎建設、深化參與的文化,社群核心價值與開幹精神至今能量依然不減。此 talk 將以 g0v 為例,分享跨界社群的成長經驗,以及從開源社群拓展到民主深化的初步成果。 State of the unison: g0v 村情咨文 從 2012 底開始的 g0v 運動,成功集結開放源碼社群,並輸出開源文化至各領域,促使公民高效率協作,解決問題。本次演講將回顧 g0v 社群的成果,包括專案、與 gov 合作、國際交流,以及未來展望。 DevRel 的再思考   俺可以来讲讲大陆开源技术社区这12年. 相似演讲: - 幻灯: https://speakerdeck.com/ zoomquiet/140330-ostc-just4fun - 录音: http://zoomq.qiniudn.com/ CPyUG/140330-OSTC/ 140330_ostc_pm1_zoomquiet.MP3 - 录像: http://v.youku.com/v_show/ id_XNjk2OTcyODQ4.html" 更多議程請見 http://coscup.org/2014/zh-tw/program/

COSCon 中國開源年會特別軌:「COSCUP 議程軌」徵稿開始!

COSCUP 於中國的國際交流特別議程軌開跑了!! 想從台灣交換至中國演講的朋友們別錯過了! COSCon 2023 官網 業界最具影響力的開源年度盛會 2023 第八屆中國開源年會 (COSCon’23) 將於 2023 年 10 月 28 日(星期六)- 29 日(星期日)在四川省成都市高新區菁蓉匯由開源社舉辦。 COSCon 以其獨特定位及日益增加的影響力,吸引越來越多的頂級企業和國際基金會的大力支持。與一般企業、IT 媒體、行業協會或國外基金會在國內所舉辦的行業大會大不相同的是,COSCon 除了吸引跨企業和跨項目社區的不同用戶之外,也專註於吸引國內外大咖開源開發者、貢獻者和提交者的關註及參與項目及其社區。 今年的 COSCon 以「開源:川流不息、山海相映」為主題。 我們相信,開源之水將如山川間的溪流,生生不息,永不枯竭,無論是「峰會」還是「海會」,總有一個能容納心向開源的你。 在「後新冠時代」的第一年,我們將採用「烽火模式」,即在主會議後再在有意向的城市舉辦 After Party,將全球聚集而來「開源火種」在全國傳遞,以促進各個城市的開源文化傳播和開源人交流。 目前擬舉辦 After Party 的城市有北京、上海、成都(如果您所在的城市也希望舉辦 Affer Party 歡迎和我們取得聯系)…… 我們策劃的論壇主題包括但不限於:人工智能、開源商業、雲計算、大數據、區塊鏈、物聯網、開源教育、開源文化、開源治理、開源硬件、開源操作系統、女性論壇、開源公益、Web應用開發、開源百寶箱以及閃電演講等。除了各種會議,我們還將舉辦極具特色的“開源市集”,“開源市集”除了有展商的展台,還有各種有意思的小活動、小遊戲,通過遊戲化、娛樂化的方式普及開源文化,倡導開源精神。 COSCUP 今年與 COSCon 進行講者交流合作,於台灣及中國之間交換講者,建立國際交流的重要機會,讓雙方講者都能夠來往交流,特別是提供台灣的開源人更有機會到中國發表演講。 我想要投稿✋ 徵稿期間:即日起~9/13 止 徵稿對象:願意配合 COSCUP / COSCon 對此專案相關宣傳及訪問者; (及需要有被中國接受的證件才能出國。) 徵稿內容:各式 Open Source 相關議題皆可投稿; 請參考 COSCon 今年徵稿論壇類別 (上述) 。 演講

補文:Conference: Impossible! 的 COSCUP 2009

COSCUP 2009 總召 pingooo 在 2009 年寫了三篇有關 COSCUP 的文章,這是 第三篇 ,轉貼到 COSCUP 部落格留個記錄。 唉呀,都 2010 年了,才來寫舉辦 COSCUP 2009 研討會的回顧不會太慢了嗎? 這實在是我自己懶,加上有些帳款比較晚才收到(好像也和我有關 :p),整個 COSCUP 2009 的會計帳前一陣子才結清,要謝謝辛苦對帳的 Layla 和 Jouston。 我另有一篇有關 COSCUP 2009 籌備時期點滴的「 pingooo 總召的碎碎唸 」,是為了大會手冊在大會前三週寫的。辦活動是越接近活動日越緊張,這篇就來寫寫最後那幾週刺激好玩的事、順便 把一些總帳算一算 講講夥伴們不可磨滅的功勞、也履行一下之前說會公開研討會財務的承諾好了。 難得見面的熱血工作夥伴 既歡樂又驚險的大會手冊 COSCUP 物流中心 北京烤鴨爐 COSCUP 花絮照片 COSCUP 名句 好好玩的閃電秀 人客來買唷! 書展 COSCUP 精品街 我們也有吉祥物! 記憶足跡 互相漏氣求進步 數據來了! 誌謝 結束了... 片尾功勞簿 難得見面的熱血工作夥伴 還記得 2008 年底的時候,說話一向一針見血的 Pofeng 發了一封信問幾個朋友 COSCUP 2009 要不要辦,說: 不過我要提醒一下 Ping ; COSCUP 的籌備人力一直不足 休息一年, 我也覺得無妨, 如果 COSCUP 2010 再需要小弟, 小弟也願效犬馬之勞 還好有輔導長 lman 的組織動員能力和各工頭的努力招募,往年一向籌備人力不足的 COSCUP,在 2009 年有了戲劇性的轉變。COSCUP 2009 雖然在台北舉行,但工作夥伴來自各地:台北、基隆、桃園、新竹、台中、嘉義、台南、高雄。都是志工的夥伴們,只能靠工作之餘的時間投入,彼此之間很少見面,完全依賴各種網路工具來討論、協調大小事,這樣也可以辦出一個 兩天兩地450人的歡樂研討會 ,現在想起來還是覺得不可思議!所有夥伴的熱血、主動積極、體諒彼此和相互扶持,是這一切成功的原因。 既歡樂又驚險的大會手冊 在 Ijs 的設計之下,COSCUP 2009 有一本印刷精美的大會手冊,整個研討會的