# Vue.js 簡介
:::info
Vue.js 最主要的核心功能有兩個部分：**宣告式渲染** 與 **元件系統**。
:::

## 指令式渲染 vs 宣告式渲染
### 指令式渲染
jQuery 和 JavaScript 在操作畫面時，大多是以操作 DOM 物件來處理。
像這種一個指令一個動作，以「操作 DOM 為基礎」的模式，稱為指令式渲染。
* 優點：簡單直覺，當事件和元素量少時，可以很直覺的對 DOM 進行操作。
* 缺點：專案規模增長，資料難以維護。

### 宣告式渲染
以「宣告」的方式在模板（HTML）呈現 JavaScript 的資料，當資料更新時，Vue.js 會將資料狀態同步更新並渲染到模板。
也就是將資料/狀態統一交給 JavaScript 物件維護管理，網頁上的事件都是針對物件狀態進行操作，減少直接操作 DOM 的行為，已資料驅動畫面，也就是 MVVM 模式。

## MVVM 模式
MVVM 分別由 Model、View 以及 ViewModel 這三個部分所組成。
* Model：狀態
* View：畫面
* ViewModel：將 Model 層與 View 層的狀態自動同步

Vue.js 將 DOM 的事件監聽和資料狀態綁定封裝起來，當使用者透過操作 View 或觸發網頁事件時，ViewModel 層的 Vue.js 就會將狀態回存到 Model，如果 Model 裡的狀態被修改了，就會同步更新到 View 的對應內容。


## 元件系統
網頁系統的根本是 DOM 模型（Document Object Model），每一個 DOM 單元（Node）可以組成 DOM Tree（組建樹）模式。
Vue.js 的元件系統就是基於此一概念加以簡化，讓最小單位可以是 Node 節點，也可以是組合好的元件單元（Component）。
每個元件都能有屬於自己的模板、程式邏輯、樣式，而這些元件組合起來就是原件樹（Component tree）。

## 漸進式框架
> 漸進式框架代表著框架允許開發者以「漸進」的方式來挑選你所需的特性。
> 當專案的規模不需要控制前端路由、不需要大型集中狀態的管理，那麼你只需要載入 Vue.js 核心就夠。


---

## 參考資料
* [重新認識 Vue.js | Kuro Hsu](https://book.vue.tw/CH1/1-1-introduction.html)