ES6 推出了管理 javascript 模組的語法，透過 import、export 可以將每個檔案視為獨立模組，讓檔案不會過於龐大，且可讀性也比較高，每個系統都有相對的模組，在程式碼的管理與組織方便了許多。

JS 在編譯時，會將宣告的變數、函式都先存放到一個記憶體空間，很像是被提升到最前面，賦值不會跟著被提升，實際運行時，再把值塞進剛剛存放的記憶體空間裡。

ES6 提出的 let 與 const，能讓宣告變數的使用方式、型態可以更謹慎，也會限制 scope 範圍，一起來看看 var, let, const 之間有什麼差異吧！

表單綁定

表單開發是 Web 開發中最常見的需求之一，幾個基本的 Vue 表單處理如下

事件修飾符

1
2
3
4
5
6

.prevent // 防止做原本預設的動作
.stop // 阻止事件冒泡到父元素，阻止任何父事件處理程序被執行
.self // 只在自己的層級處理自己的程序
.once // 只處理一次
.native // 在元件的根元素上監聽一個原生事件
.sync

Vue3 還有很多新功能官方正在進行中，目前有幾個差不多定案的新功能

Vue 處理共用邏輯的方式

以往用 Vue2 處理共用邏輯有幾種方式

🔸 Mixins
🔸 Higher-order Components ( HOC )
🔸 Renderless Components

但 Vue2 存在著一些問題，命名衝突、產生多餘的元件實體、資料難以追蹤來源，就會有一些狀況產生。
隨著 Vue3 的升級，Vue3 Composition API 解決了 Vue2 的問題

圖片切換範例

API 抽離管理，清楚管理資料

axios create 的物件會變成 axios 的實體
axios interceptors 攔截器，可以做驗證檢查

什麼是 Vuex?

Vuex 是 Vue 應用程式的狀態管理，組件常會跨結構的傳遞狀態、需要全域狀態的管理，用 Vuex 可以更容易的控管你的資料流。

嵌套路由(Nested Routes)

父層有 router-view 可以切換，內層也有自己的 router-view 可以切換