跳到主要內容

【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 2024 Call for Participation 議程軌與攤位即日起開放申請

COSCUP 2024 Call for Participation, 議程軌與攤位即日起開放申請 COSCUP 2024 的社群議程/攤位即日起開始接受申請,社群議程於 3 月 17 日截止申請,社群攤位於 6 月 3 號截止。請有興趣在今年與我們共襄盛舉的社群把握機會! 點此快速報名 / Quick Apply 點此跳到社群攤位 Jump to Community Track English Ver. Jump to Community Booth English Ver. 社群議程 Community Room COSCUP 2024 社群議程提供場地與行政協助,您可以在此舉辦一整天關於特定開源議題的討論、座談、工作坊等。 特色包括: 自訂議程時長:各社群可以自己決定每段議程的時間,無論 15 分鐘、30 分鐘、45 分鐘,甚至直接開設數個小時的工作坊都可以。 自訂休息時間:各社群可以決定是否有休息時間,或是連番上陣。 What's new in COSCUP 2024 今年 COSCUP 有一些新的合作注意事項,歡迎欲報名的社群夥伴們確認,報名即視為貴社群同意今年度的合作注意事項 COSCUP 歡迎社群夥伴宣傳、分享社群在 COSCUP 的活動相關資訊,包含且不限於規劃獨立報名系統、架設宣傳活動網頁,或是使用票卷系統等,惟須請在相關管道中註明合作夥伴為 COSCUP 團隊。且秉持 COSCUP 精神,所有以 COSCUP 名義相關的活動,請避免限定會眾參與身分,若因特殊原因需限定參與身分,請與議程組聯絡與討論。 申請加入 COSUCP 的夥伴將視為同意大會 CoC準則,敬請夥伴們一同宣導大會 CoC ,為會眾創造尊重與友善的活動 更多社群合作準則,請參考 本文件,報名即視為同意本文件所提到的各項注意事項 Changes in COSCUP 2024 今年 COSCUP 將基於 20

COSCUP 2024 Early Bird Call for Proposals

COSCUP 2024 Early Bird Call for Proposals Welcome to the Early Bird Call for Proposals of COSCUP 2024! COSCUP Now offer early submission to better prepare our potential speakers to attend the 2024 COSCUP in person 😀 About COSCUP COSCUP is an annual conference organized by the Taiwanese Open source community since 2006. COSCUP aims to provide a platform to connect Open Source coders, users and promoters, while promoting FLOSS within the annual conference. The conference is free to attend and all the staff are volunteers. We had more than 2800 attendees last year, and we believe this year there will be more. It is the biggest open source gathering in Taiwan, and the attendees are mostly developers, along with some power users and FLOSS promoters and lovers. Here is an album of our previous events: https://www.flickr.com/photos/coscup/albums Where is Taiwan? Find it on  Google maps

COSCUP 2023 財務報告

COSCUP 2023 年度財務收支摘要 COSCUP 2023 Annual Income and Expenditure Summary For the period 2023/01/01~2023/12/31 收入 Revenues 金額 總計 企業贊助收入 NT$2,366,132 個人贊助收入 219,054 義賣收入 122,463 利息收入 4,574 周邊活動收入 24,440 總收入 Total Revenues NT$2,736,663 支出 Expenses 金額 總計 場地費 NT$616,498 議程交流費用 446,810 行銷費 444,015 義務工作人員費用 432,000 餐飲費用 220,555 設備與器材費 144,587 周邊活動費用 88,300 擺攤出訪費用 74,203 倉儲及物流費用 43,657 線上系統費用 37,906 保險費 11,957 雜支 6,837 捐贈開源社群 130,983 金流手續費 7,826 稅費與金流服務費 228,769 總支出 Total Expenses NT$2,934,903 期間淨收支 Net Income 2023/01/01~2023/12/31 -NT$198,240 支出科目 歷年結餘 歷年結餘 2006/2008~2018 結餘 NT$5,146,663 2019 結餘 NT$1,128,514 2020 結餘 NT$86,842 2021 結餘 NT$744,271 2022 結餘 NT$1,015,462 2023 結餘 -NT$198,240 結餘款總計 NT$7,923,512