# Vue.js 筆記與心得報告
# 筆記
* ### 什麼是 漸進式 JavaScript 框架 (The Progressive JavaScript Framework)?
允許開發者可以挑選需要的東西。

* ### 什麼是 MVVM 模式?
MVVM 分別由 Model、View 以及 ViewModel 這三個部分所組成。

* ### 什麼是元件(component)系統?
代表同樣邏輯、同樣模板的東西可以重複拿來使用的系統。元件（Component）的最小單位可以只是節點，也可以是好幾個節點組合而成的元件，甚至元件內還可有元件。

* ### vue2, vue3 有哪些的差異?
1. 狀態的響應式偵測由Object.defineProperty改成Proxy API，執行時的效能更好，也解決了過去vue2.x在物件，陣列更新偵測的問題
2. 內建新增“Teleport”，“Suspense”等功能型元件，擴充了更多可能性
3. 新增setup，ref等語法糖，開發時的體驗更好
4. 模板編譯：靜態節點優化，新的Virtual DOM更新時只需要遍歷動態的節點，更新時與實際DOM數量脫鉤，減少不必要的效能浪費
5. 新的Composition API提供了另一種對程式碼，邏輯甚至是狀態的共用管理方式，擺脫過去mixins的混亂

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

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

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

* ### computed/methods 差別在哪?
computed 屬性會將計算後的結果暫存，若它沒有被更新的情況下，就不會再次執行。methods的話，沒有這樣子。

* ### html 中 v- 開頭的屬性有什麼用途? 請舉例?
透過指令的作用與狀態的變化，就可以透過改變狀態 (資料) 來操作整個網頁系統了。

1. v-model：會根據不同的表單類別來更新元素的內容。
2. v-text：會無視標籤內原本的內容。
3. v-once：在於只會渲染指定的節點一次，往後就不再更新。

* ### 怎麼實作一個按鈕(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 的用途?
可以用來遍歷物件形式的資料,也可以將物件的 key 值一並列出。

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

beforeCreate：任何Vue實體中的設定都還未配置
created：Vue完成創建實例
beforeMount：在Vue實體中的定義被掛載到目標元素之前叫用
mounted：Vue實體上的設置已經安裝上模板
beforeUpdate：還未被重渲染為改變後的畫面
updated：已經被重渲染成改變後的畫面
beforeUnmount：在Vue被摧毀前
unmounted：所有綁定、事件監聽、Watch與渲染至目標的HTML DOM等等皆移除

# 心得
通過這次作業我學會了vue2跟vue3的差別，Vue.js的基本知識和功能。因為我以前學javascript時沒有看過vue，所以我以為vue是跟以前學過的程式語言完全不一樣的，但後來知道了vue是發展的javaScript。我個人覺得跟javascript比起來，vue比較容易寫。還有我覺得vue3的功能很有用，所以未來希望自己會寫。