忍者工坊
0%

簽書會紀錄 | Vue3 | Composition API | Vite

發表於 更新於 分類於

前言

在 Vue 3 出來之後我有嘗試了一下新的功能，結合 LIFF 做了一個 side project - Announcer-Vue，當然也有寫了一篇相關使用的文章 在 Vue3 中引入 LIFF 的 ShareTargetPicker 分享 FlexMessage 訊息給 LINE 好友，那既然會用了，當然也要來了解一下一些 Composition API 的介紹，那以下就是我去參加 Kuro 的簽書會所聽到的內容。

介紹

新版本一出，大家就會想嚐鮮使用新版本，但這邊講者提到若開發需求需要支援 IE 時請勿當先行者直上 Vue3(文章有提到)

除了 IE 支援度問題以外，目前就我所知 Vue3 向下相容基本上達到九成以上，且也可以在 3 版中套入 2 版的相關 API 實作。

Vue 2 與 3 Mount 的差異

Vue3 提供彈性讓開發者在 mount 時相關套件可以更方便的加入專案中，以下提供範例：

  • Vue3 mount 都是在 createApp() 後面一直接著 .use() 來使用相關套件，最後在 mount 至 #app 中

小知識： # 的意思是會選擇 HTML 標籤裡的 id 元素， #app 的整體意思就等於選擇「HTML 標籤欄位名為 app」 的區塊中。
如果是 . 就是選擇 HTML 標籤欄位裡的 class 元素，但由於 id 是唯一的元素(參考)，因此大部分情況下不會選擇使用 class 來 mount。

範例

1
2
3
4
5
6
7
8
9
10
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index';

createApp(App).use(router).mount('#app');

// 也可以拆開並寫成：
// const app = createApp(App);
// app.use(router);
// app.mount('#app');

Vite

看名字很容易覺得他只支援 Vue，實則不然，其實他支援了許多種前端框架(文件)，本文中就都會以 Vue 為主。

  • vanilla
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts

如果讀者想要把 Vite 上 Production 環境的話要考慮瀏覽器相關支援度喔

簡介

可以透過任一種方式去 init 一個專案：

NPM:

1
npm init @vitejs/app

Yarn:

1
yarn create @vitejs/app

建立完後進入專案資料夾中，看到 index.html 中最後引入了 <script type="module" src="/src/main.ts"></script> ，看到 type=”module” 即為 Vite 所引入的 JavaScript

alias - 客製化你想要的路徑

過去剛使用時常常搞不清楚為什麼是用 @ 來開始一個路徑，若常使用 Linux 相關的指令會很直觀地想為什麼不用 ./ (當前目錄)、 ~/ (絕對路徑的目錄)、 ../ (當前檔案位置的上層資料夾)，這些都是我剛開始碰到的用法上的困擾(根本是文件沒看清楚 😆)，以 Vue 來說， @ 的設定通常都是 src/ 下，Vite 這邊可以參考以下用法來客製化代表路徑：

1
alias: { '/@foo': path.resolve(__dirname, 'some-special-dir') }

引入時使用 /@foo 這個字串就等於找到當前專案目錄(__dirname)的 some-special-dir 的資料夾

Vite 官方文件中說明在 resolve 路徑時是使用這個套件作成的 - rollup/plugins。

Composition API

過往需要共用 Component 時會需要使用 mixin 來處理，但因為每個 Component 都有各自的 Computed、Method…因此很容易在不同的 Component 之間造成衝突，且在渲染 life cycle 中也有機會影響到其他 Component。

模擬 Vuex

這邊一般都不推薦直接當作替代方案，因為原本設計的用計就不是做資料狀態管理，但也是許多人發現流程可以做出來，因此在某些情境下若無需透過 Global 來管理資料狀態的話，可以使用這個方式來對資料做檢疫的處理。

  • 需要使用 reactive 去 hook 相關數值。
  • 每個 component API 都有自己的 data, method, compute，需要用時在個別去 import 避免在修改時影響到其他的頁面。
  • Use inject and provide to hook which would like Vuex mutation, and reactive data like Vuex Store。

範例專案: TBD

結論

在這次聽講過程中也藉由過往有些使用 Vue 框架讓我在過程中較沒那麼苦手 😆，現場許多 Live Demo 也解開了我一些過往未解的疑惑，透過參加活動也讓我更了解新工具的相關操作方式，期待之後我也可以應用在我的 Side Project 上～