# Chapter 1| Vue.js基礎入門

### 什麼是 漸進式 JavaScript 框架 (The Progressive JavaScript Framework)?
透過簡單的 API 提供開發者實作資料綁定與操作網頁上的元件，同時也因為 Vue.js 的核心把焦點關注在狀態與畫面的同步層級上，遂能夠輕易地與其他 JavaScript 函式庫、前端開發工具鍊等整合使用，成為一套完整的前端開發方案。
### 什麼是 MVVM 模式?
MVVM 分別由 Model、View 以及 ViewModel 這三個部分所組成。
### 什麼是元件(component)系統?
元件系統有屬於自定義的模板、程式邏輯，以及樣式。元件最小單位可以只是節點，也可以是好幾個節點組合而成的元件，甚至元件內還可有元件。
### vue2, vue3 有哪些的差異?
* 引進了 "Fragment" 特性，不再限制元件必須只能是單一根節點
* 狀態的響應式偵測由```Object.defineProperty```改為```Proxy API```，執行時的效能更好，也解決了過去 Vue 2.x 在物件、陣列更新偵測的問題。
* 模板編譯：靜態節點優化，新的 Virtual DOM 更新時只需要遍歷動態的節點，更新時與實際 DOM 數量脫鉤，減少不必要的效能浪費
* 內建新增 "Teleport"、"Suspense" 等功能型元件，擴充了更多可能性
* 新的 Composition API 提供了另一種對程式碼、邏輯甚至是狀態的共用管理方式，擺脫過去 mixins 的混亂
* 新增```setup```,```ref```等語法糖，開發時的體驗更好
### 用 vue3 寫一個 hello world 需要那些程式碼?

<div id="demo">
  <h1>{{ message }}</h1>
  <input v-model="message">
</div>

const vm = Vue.createApp({
  data() {
      return {
            message: 'hello world!'
     }
  }
}).mount('#demo');

### computed/methods 差別在哪?

### html 中 ```v-``` 開頭的屬性有什麼用途? 請舉例?
被視為指令使用。常見的有:```v-html, v-bind, v-model, v-text, v-once, v-pre```
### 怎麼實作一個按鈕(button)事件?

const vm = Vue.createApp({
data () {
return {
count: 0
}
},
methods: {
plus () {
this.count++;
}
}
}).mount('#app');

<p>Count: {{ count }}</p>
<button v-on:click="plus">Plus</button>

### 請舉例一個 ```v-for``` 的用途?
可以```item in items```的語法使用(```item```可以命名為符合javascript的變數名稱)
### 請用自己的話解釋 vue 元件的 生命週期 (life cycle) 與更新機制?
建立:
>建立實體並初始化狀態與事件。

掛載:
>實體與模板(DOM節點、事件)綁定。

更新:
>與掛載非同步執行。DOM進行更新。

銷毀移除:
>然後將實體內的各種事件、狀態的```watcher```、子元件 (如果有) 通通卸除， 完成後結束實體的一生。銷毀後無法使用。

### 心得
以前沒學過相關的程式知識，所以在一開始接觸到相當多的困難。但此書教材內容清晰有條理，用口語化的方式讓我更容易理解，同時讓我了解到vue的實用性與其強大之處。我相信在這門課程結束後可以學到更多相關知識。