Vue 3: Composable
甚麼是composable?在寫純JavaScript的時候,有時會想將一些重複的邏輯抽離出來變成另一個可被其他程式碼使用的函式,在Vue3裡面,composables也是在做一樣的事情;只是跟傳統函式不一樣的是,composables內可以包含Vue的狀態,譬如響應式狀態變數ref、reactive等,或者lifecycle hooks像是onMounted、onUnmounted等。 基本用法
Search for a command to run...
Series
甚麼是composable?在寫純JavaScript的時候,有時會想將一些重複的邏輯抽離出來變成另一個可被其他程式碼使用的函式,在Vue3裡面,composables也是在做一樣的事情;只是跟傳統函式不一樣的是,composables內可以包含Vue的狀態,譬如響應式狀態變數ref、reactive等,或者lifecycle hooks像是onMounted、onUnmounted等。 基本用法
因為工作上是用Quasar cli搭配Vue3.2,但Vue文件有些範例已經使用版本3.3以上的API,目前看起來官方好像還沒提供各版本的Vue文件,所以只好從GitHub上去找:https://github.com/vuejs/docs 首先找到相應的文件內容點選History 再根據Commit時間找到可能要查詢的文件版本: 點選Browser File去瀏覽該版本的所有檔案 然後
因為工作要用Vite去生成一個mpa專案且根據頁面不同,動態生成不同 <title> 的HTML,所以就找了一個套件──vite-plugin-html,結果因為套件好像很久沒維護,隨著Vite升級又多了一些有的沒的bug,順手來記錄一下。 template delete 像我第一個就是遇到生成的時候template HTML也會被刪掉,後來看到issue上也有人反映,還好有好心人士解決這個問題,
最近寫composable要 return 響應式變數,因為希望外部在使用這個composable的時候不要去改動到這個響應式變數,故使用 readonly 去包覆這個響應式變數: // useComposable.js import { readonly } from "vue"; export default useComposable(){ const nested = re
因為工作中的Vue3專案都是用pinia來處理全域狀態問題,不過發現有時候有些跨元件狀態不會到整個應用都需要,但使用props又要用多層傳遞,所以筆記一下比較少用Vue本身的provide、inject機制。 以下使用Vue3 composition API語法為例: Provide // parent component <script setup> import { provide } from 'vue'; provide(key, value); // 參數第一個是injection...