程式設計Vue Writable computed
限制：getter的返回值與setter 的參數要一致。 e.g. 下例都是 string、不然 editor compiler 會叫錯 <script setup> import { ref, computed } from 'vue' ...
VueJS
程式設計程式設計Vue Computed vs Methods
差異 同一個 component 中、Computes 有在內部作 cache，Methods 沒有，所以 template 在 render 時不用每次呼叫，計算成本較低 // template {{ urlMap[item.id] }}...
程式設計Vue 建立很多 child-components 對效能的影響??
因為每一個 Vue 元件都會有一個對應的 watcher 來查看 Virtual DOM 與 Real DOM 的關聯，建立很多個子元件時也表示會建立很多個 Vue Instance 關於會不會影響到效能或吃掉大量記憶體，目前還不完全清楚 ...
程式設計利用 Vue inheritAttrs: false 繼承屬性到第二層子元件
用在：html 有複數層的子元件，加上inheritAttrs: false 的話才能將 native attribute 透過 $attr 傳入第二層的 html tag 中、且不會影響第一層的 label Vue2 例如下方範例的 re...
程式設計Vue Component 的命名轉換
使用 VTextArea 時，compiler會出錯，說找不到 component Vue 的內部轉換中，casemal 和檔名的 kebab 是一對的 VTextarea === v-textareaVTextArea === v-tex...
程式設計VueJs delay input search 延遲搜尋
一般的實作會用 v-model="searchedEmail"，然後 listen inputed 的變化後向 server 發送值 問題點：每輸入一個字元就向自已的 server 發送 request，連續一直輸入，其實就是自體DDoS攻...
程式設計VueJs Dynamic components & import 動態元件
不用寫一堆 v-ifv-if-else 來區分元件，一個 component 元件就可以 <component v-bind:is="currentTabComponent"></component> const currentTabCo...
程式設計VueJS Event Bus
Vue2 利用 vue 本身 global 的物件產生通道傳值 // define import Vue from 'vue'; const EventBus = new Vue(); export default EventBus // ...
程式設計Nuxt3 Local 專案中置換 module package 內容
Packages NodeJs 專案的開發中，常會引用到很多套件 (Packages)。本機 Local 開發專案 A 與套件B (Package B) 時，若想在本機端測試套件B 能否在 專案A 中運作可用下列方式 置換方法 專案B 修改...
程式設計Vue3 變數宣告 Reactive vs Ref
Vue3 中加了很多新的機制，導致變數宣告時變得比 Vue2 來得複雜。傳統的宣告 `const hello = 'hello' 與 Reactive、Ref 有什麼不一樣，為什麼改成這樣呢？ 共通點 都是為了將變數用 observer 的...