筆記各式 Vue.js 面試常見的問題。
持續編輯中 🧙♂️
問題集
MVVM
ViewModel 透過資料的雙向綁定將 Model 與 View 結合起來，資料的變化會自動同步在 Model 與 View 上，不需要人為進行 DOM 操作以及資料狀態的維護，開發起來特別省事兒。
Vue lifecycle
| Step | Info |
|---|---|
| beforeCreate | |
| created | |
| beforeMount | |
| mounted | |
| beforeUpdate | |
| updated | |
| beforeDestroy | |
| destroyed |
v-if 與 v-show
| Item | v-if | v-show |
|---|---|---|
| Cost | More | Less |
| Way | DOM | CSS |
| Lazy | True | False |
Data As Function
確保各 Components Instance 資料是獨立的，不會互相干擾、污染資料。
Methods, Computed, Watch 的使用時機
Methods
Computed
Watch
Vue Reactive 的實作方式
藉由 Object.defineProperty 將資料加入 setter, getter，搭配 watcher 來進行資料與元件的更新一致。
Vue 父子元件之間的溝通方式
父元件以 Bind 將資料傳入子元件的 Props；子元件以 Emit 呼叫父元件的 Methods。
子元件也可以直接用 this.$parent.event 的方式呼叫父元件，但不推。
圖片來源：https://v3.vuejs.org/
使用 Vue Plugin
import ... from ...
Vue.use(VuePlugin, {
})Vue 常用的 Event Modifier
| Modifier | Info |
|---|---|
| .prevent | |
| .stop | |
| .self | |
| .capture | |
| .once | 讓事件只能被執行一次 |