## 第一章問題

### 1. 什麼是 漸進式 JavaScript 框架 (The Progressive JavaScript Framework)?

就是你想要用哪部分都可以自行決定。有點像是你買一個可拆式工具箱，可以依照自己的需求選擇工具。

### 2. 什麼是 MVVM 模式?

這個模式可以允許只需處理資料內容，畫面就會即時更動。

### 3. 什麼是元件(component)系統?

元件系統是一個前端網頁模組化的方式，它允許每個元件有自己的scope，以及方法，使網頁個元件大的例如像 header, footer 至小的到任何一個可覆用的元件有了重複利用的機會，也讓團隊開發有了更好的切入方式。

### 4. vue2, vue3 有哪些的差異?

引自文章：
1. 引進了 "Fragment" 特性，不再限制元件必須只能是單一根節點
2. 狀態的響應式偵測由 Object.defineProperty 改為 Proxy API，執行時的效能更好，也解決了過去 Vue 2.x 在物件、陣列更新偵測的問題
3. 模板編譯：靜態節點優化，新的 Virtual DOM 更新時只需要遍歷動態的節點，更新時與實際 DOM 數量脫鉤，減少不必要的效能浪費
4. 內建新增 "Teleport"、"Suspense" 等功能型元件，擴充了更多可能性
5. 新的 Composition API 提供了另一種對程式碼、邏輯甚至是狀態的共用管理方式，擺脫過去 mixins 的混亂
6. 新增 setup、ref 等語法糖，開發時的體驗更好

### 用 vue3 寫一個 hello world 需要那些程式碼?

const { createApp, ref } = Vue;
const vm = createApp({
setup () {
const message = ref('Hello Vue 3.0!');
return {
message
}
}
});

vm.mount('#app');

### computed/methods 差別在哪?

methods 是方法，而 computed 是由各個data經由一個自訂的算法而得出的一個新的屬性

### html 中 v- 開頭的屬性有什麼用途? 請舉例?

最常用的

v-bind (:) => 可直接於 template 中使用 vm 內的屬性
ex: 例如傳入 sub component 的 props

v-model => v-bind & @input 的語法糖
ex: 表單

v-on (@) => 事件定義
ex: 按鈕

v-for => 可利用陣列渲染不定長度的頁面
ex: 表格 tr & td

等等

### 怎麼實作一個按鈕(button)事件?

<template>
<div>
<button @click="() => {}">btn</button>
</div>
</template>

### 請舉例一個 v-for 的用途?

一個很常見的案例為 mounted 時，先去後端 DB 撈不固定長度的資料，才因此需要 v-for 來幫助渲染，常常用來條列資料庫內的東西

### 請用自己的話解釋 vue 元件的 生命週期 (life cycle) 與更新機制?

beforeCreate: 只有 vm，還沒有數據代理
created: 可以獲得 data & method
beforeMount: 還在解析模板，這時候對 DOM 的操作都不奏效
mounted: 前置工作均已完成，可以開始初始化及送 http request
beforeUpdate: 頁面是舊的，數據是新的
updated: 都是新的
beforeUnmount: 可以做取消計時器、解除事件

## Vue.js 筆記與心得報告

### 前記

我擁有 7 年的網頁前端設計經驗，曾接觸過的框架有 React、Vue、Jquery，其中包含網頁模組化、打包部屬、專案管理等等的範疇，而我目前所在職公司內部也是使用 Vue.js 做開發，我認為我擁有足夠的經驗，和大家分享 Vue.js 的使用心得，以及看完這篇文章所帶給我的感受。

### 1-1 ~ 1-2

React、Vue 兩者都是一個基於為 MVC 的架構開發，其文章內部也有提及。我認為使用前端框架的思維跟以往撰寫其他領域的程式非常不同，其思考的方向應為**資料導向**，程式內部無需做太多的 control，作為 Vue 的開發者，我認為只要定義好資料與視圖呈現的規則就好，訂定好規則，Vue就會自動地根據所讀入的資料，做頁面的刷新、渲染。而我認為這兩個框架最大的區別，是對於模組封裝的嚴謹程度。React 完整的呈現了物件導向的撰寫思維(雖然現在大多已轉向為 Function Component)，然而在 Vue 中，可以很輕易的，直接獲取到 vm 實體內部的 data (應該說，那些 data 早已經由 Vue constructor的呼叫，直接變為該實體的公有變數)，這只是其中一環，雖然不嚴謹，但另一面是他的方便性，因此，我認為 Vue 的開發較 React 簡單，但是，卻沒有了物件導向的sense。

### 1-3 ~ 1-6

這篇文章 3 到 6 章，介紹了基本的 Vue 撰寫方式。文章一開始，介紹了computed，進一步帶出了 getter & setter 的概念，這個概念便是 Vue 做數據代理的基本原理 ( 這裡指的不是 computed 裡的 setter )，藉由 setter 的設定，Vue 就有了監聽資料變化的能力。再來，這篇文章利用事件處理、條件渲染，進一步的說明了基本指令的用法，我認為非常淺顯易懂。

### 1-7

我認為這篇文章在生命週期的部分沒有說明這麼詳細，對於每個生命周期的期間，Vue 分別完成了哪些事情，以及對於其所造成的結果、開發人員在各個時候能做的事情，有部分並沒有詳細的說明。例如在Update的部分，我不清楚在 beforeUpdated 時，數據、頁面的狀況是新是舊？created 和 beforeMounted 中間，做了什麼事情？這部分是我認為可以補充說明的部分。

### 後記

我認為整體來說，這篇文章寫得很詳細，跟其他論壇的文章比起來，確實進階了一些，有些眉角作者也都有提點出來，我覺得如果是一名想要學習 Vue 的人，這本書非常值得入手。