Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界

Kuro Hsu
December 19, 2020

[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界

前端開發從早期的百家爭鳴到近年的三強鼎立,已經是個相當成熟的領域了,當前主流滿滿的 npm、webpack 起手式是否讓你對前端開發心生畏懼呢?

在本場議程中,除了介紹 Vue 3.0 帶來了什麼嶄新特性外,也以「輕前端」視角來帶領各位入門,讓對前端開發生態不甚熟悉的朋友們也能輕鬆認識 Vue 3.0 這套現代的漸進式前端框架。

Kuro Hsu

December 19, 2020
Tweet

More Decks by Kuro Hsu

Other Decks in Technology

Transcript

  1. Vue.js • 音同「 View 」 • 輕量的 JS 漸進式框架,也能與其他前端框架與函式庫並存共用。 •

    以操作物件模型為基礎的開發模式 • 直接描述 狀態 與 DOM 的對應關係 • 改變的是資料,而不是直接操作 DOM
  2. 模板編譯:靜態節點優化 • 模板內容改由動態指令 ( v-if / v-for / slot) 來切分為獨立的區塊

    • 每個動態的節點內容、位置是固定的 • Virtual DOM 更新時只需要遍歷動態的節點, 更新效率與實際 DOM 數量脫鉤,減少不必要的效能浪費 • 與 Vue 2.x 效能相比 可提升 2-5 倍
  3. Vue 3.x with Proxy API Object Proxy get (target, key)

    { return .... } set (target, key, value) { return .... } console.log(proxy.name) proxy.name = “Kuro”
  4. Compositions API • 並非為了取代原有的 Options style • 為了解決大型應用的痛點 (狀態、邏輯管理、複用) •

    模板的資料來源明確 • 沒有 「this」 • 易於切分管理,開發彈性大、效能更佳
  5. 選擇 Vue 2.x 或 3.x ? • 建議學新不學舊 • Vue

    2.x 與 3.x 有九成以上語法相容 • 需要考量的點: • IE 不能動,還有什麼值得我心痛 • 目前使用的 plugin 尚未支援 Vue 3.x
  6. 別擔心,至少還有 Vue.js 2.7 • 預計將於 2021 Q1 推出 • 預計是

    Vue 2.x 分支最後一個版本 • 有 18 個月的 LTS • 移植部分可相容 Vue 3.0 的 API 至 2.7 版本
  7. 更多… • 輕前端很好,但是 善用前端開發工具你可以獲得更多 • ES Module 的 import /

    export 組織功能更有效率 • Vue SFC (單一組件檔) 讓你的檔案更好管理 • 打包編譯時的 tree shaking 能讓檔案更小,執行效能更好 • Vue-CLI 命令列腳手架、各種方便的語法糖