owned this note   changed 5 years ago  
Linked with GitHub

Vue.js 3.0 與 Composition API 的變革 - Kuro Hsu

歡迎來到 MOPCON 2019 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/@mopcon/2019
手機版請點選上方 按鈕展開議程列表。

會場 wifi-SSID: mopcon-2019
會場 wifi-PASSWD: mopcon-2019

tags: MOPCON 2019

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

參考 Reference : VueConf2019SH_Evan

  • 目標是更小更快
  • 加強對 TypeScript 的支援
  • 加強 API 的一致性
  • 開放框架底層的擴充功能
  • 畫面更新偵測API: Object.defineProperty => Proxy API (IE不支援，來跟舊瀏覽器說掰掰)

Virtual DOM　重構
增強編譯時的優化

Class API

  • 為了增強與 TypeScript 的支援
  • 與現有 API 的相容性差異太大
  • 瀏覽器對原生 API 的支援還不夠完整

Composition API

  • 先前叫 function-based API
  • 組合代替繼承 實踐元件功能的reuse
  • 對 TypeScript 類型推導的支援更好
  • Tree-shaking friendly, 編譯後程式碼更容易被壓縮

Mixins

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
可能造成 Namespace 衝突
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
從 Mixins 引入的 options 難以追蹤來源

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

參考 Reference : VueConf2019SH_Evan

HOC: Higher-order Components

大腸包小腸 三層以內的還算能維護，超過就很難追蹤來源

higher-order components

參考 Reference : VueConf2019SH_Evan

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Props來源不清晰
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Props namespace confliction
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
多餘的元件實體造成性能浪費

Renderless Components

Renderless Components

參考 Reference : VueConf2019SH_Evan

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
options 來源清晰
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
無 namespace 衝突問題
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
多餘的元件實體造成性能浪費

Composition API

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
資料來源清晰
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
無 namespace 衝突問題
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
不會產生元件實體造成性能浪費

Vue 2.0 可額外安裝套件以便使用：
https://github.com/vuejs/composition-api/

setup()

  • 沒有 this
  • 將共用邏輯放在 setup 函式
  • 透過 context 參數取得原本在 this 對應的屬性
  • 將需要暴露的屬性 return 出去

解決 mixin

  • 撞名問題

Composition API 很像是 React 的 Hooks，以及包含 React 的 Custom Hooks 的精神，讓原本重複的邏輯可以拆成很像是普通的 function，在需要時 import 進來就可以使用。

Demo

Github: kurotanshi/vue-composition-api-demo

ref()

  • 生成一個響應式的屬性 (如 react 的 state hook)
  • 透過 .value 屬性存取

reactive()

  • 意義上等同於 V2.x 的 Vue.observable()
  • 無須透過 .value 屬性存取

Lifecycle hooks

  • 將原本 Lifecycle hooks 透過 onXXX 的形式來對應

與React Hooks對比

  • 兩者同時為了處理元件複用
  • Vue setup() 只會在 init 被呼叫一次
    • 沒有React Hook 的Garbage Colleciton和Life Cycle問題，React Hook 開發者必須要自己優化。

Vue RFCs 簡報

Vue社團

Select a repo