跳到主要內容

【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 x KCD Taiwan 2022 CfP is now open, submit your proposal before May 23th, 2022.

We have pleasure to work with KCD Taiwan to have a joint conference this year. We are looking for talks in several open-source related areas, please submit your proposal before May 23th, 2022. After the review process from the coordinators, we will publish the full programme in early June. Please note that the length of each agenda is preset to 30 minutes, only the specific tracks are open to other agenda lengths for selection, which will be filled in on the second page of the registration form.  In the submission type on the first page of the registration form, please select the default value (30 mins) . 今年 COSCUP 我們很榮幸與 KCD Taiwan 合作舉辦聯合研討會,並且如往常,徵求各式各樣不同的 Open Source 相關稿件。請於 5 月 23 日前投稿,或可參考本頁下方各議程軌資訊。    請注意,每場議程長度預設為 30 分鐘 ,惟指定議程軌開放其他議程長度進行選擇,會在報名表單第二頁進行填寫,報名表單第一頁的 提交型態 中,請選擇預設值。 Submit your proposal Important Dates Submission deadline: May 23th, 2022, Anywhere on Earth!(截稿時間) Full programme published: Early July (預定公佈時間) COSCUP x KCD 2022: July 30th - July 31th, at National Taiw

2022!前夜派對!Open source and wine!Welcome Party!

喝! 年會 前夜 的交流 派對 ,來與大會講者、社群同好一起喝酒聊天! Join the Party, have fun with the speakers and your beloved FLOSS community members! 會場有什麼? / What will we have at the party? 當日精選的 MIT 掌門精釀啤酒 (也有無酒精飲料) Beer ! For people who don't like alcohol, the bar also provides soft drinks. 下酒點心 Snacks 200 坪空中花園派對,可以直接看到台北 101!美景與美酒,絕配! Awesome view, believe me! Just check the photos from Google Maps. 最重要的是:與熱愛開源的大會講者與社群同好交流的最佳活動! Lots of FLOSS folks! 注意事項 / Note 會場食物為小零食,數量有限,建議吃過正餐再來! Please have your dinner before the party, we only prepare party appetizers. 低消為 $200 元。 The minimum order is NTD$200. 不用報名,自由參加。 Please feel free to join Welcome Party, no matter what you come to COSCUP x KCD Taiwan 2022 or not. 贊助商請找 贊助組 領取酒券。 If you are the sponsor, please contact the Sponsorship Team for the free beer ticket. 如果你怕忘記參加活動,可以訂閱 COSCUP 活動電子報 ,不錯過最新活動訊息! Subscribe the COSCUP newspaper to receive important reminders and exciting activities. 時間地點 / When, Where 時

會眾新服務「療癒市集」結合紅酒瑜伽、冥想正念、按摩小站、氮氣咖啡 | Introducing the Healing Market with Yoga Wine, Meditations, Massage Station, Nitro Coffee

新 [English version below] 今年的 COSCUP x KCD 2022 Taiwan 嘗試推出新的會眾服務,希望在繁忙的平日還抽空在假日來參與活動時、能夠療癒一下心靈與身體的負擔,「 療癒市集 」希望能夠為你帶來不一樣的體驗! 由於部分課程需要 預先報名 ,如果你有意參與課程,請直接 寄信報名 ,並等候志工收件處理,感謝! 以下是相關的課程簡介。 紅酒瑜伽 照片來源:台南安平雅樂軒酒店 都市生活步調快,上班壓力大,周末總想找些紓壓的活動幫自己充飽電,用更好的狀態去迎接下個挑戰。而說到現在最新穎,時尚的選擇那就不能不提風靡歐美的「紅酒瑜珈」。現在不用出國,在 COSCUP 也可以體驗這種身心靈保養的運動。 課程中,老師也會指引學員在不同階段品嘗手中的葡萄酒,感受這支紅酒在不同醒酒階段的各種風味,細細品嚐它的層次與韻味。酒精也同時能夠增加血液循環,讓身體發熱,達到肌肉暖身,類似熱瑜珈的運動效果! 紅酒瑜珈是什麼? 於 2017 年誕生於紐約,紅酒瑜珈是把紅酒帶進瑜珈練習的一種課程。在瑜珈練習的過程中,學員們手上各有一杯紅酒。老師帶領著學員練習瑜珈姿勢,並加入酒杯動作來增加難度與運動量。比如說,手握紅酒杯進行戰士三式(Warrior III),為了不讓液體撒出來,其實比起沒有道具輔助的瑜珈需要多一點肌耐力,所以可以達到更大的脂肪燃燒跟運動效果。 課程須知 每一課程時長為一個小時,費用 $470元/人,每一堂最多 12 人。 講座內容包含:活動包含約 45 分鐘的紅酒瑜珈活動,及約 15 分鐘的講解,課程會提供酒杯,若損壞葡萄酒杯,則每只費用 $250。 需自備:瑜伽墊、水壺、毛巾等個人用品。 ★ 由於課程需要預先報名,如果你有意參與此課程,請參閱 課程時間表 並直接 寄信報名 、等候志工收件處理,感謝! 冥想正念 我們都渴望獲得內心的平靜,尤其在現在這個快速、忙碌更迭的時代,在這個無時無刻都在面對比較、落後焦慮的世代。透過冥想與正念,你會更加理解你自己,你也會更加理解你的周遭一切,而點滴的時光之間,再次放下自我,又擁抱自我。 課程須知 每一課程時長為一個小時,費用 $350元/人,每一堂最多 10 人(未滿 5 人不開課)。 講座內容包含:冥想正念概念介紹、正念心理