# 什麼是 漸進式 JavaScript 框架 (The Progressive JavaScript Framework)? 使用者可以用想用的或是能用的功能特性,不想用的部分功能可以不用。 # 什麼是 MVVM 模式? Model:管理資料來源如API和本地資料庫 View:顯示UI和接收使用者動作 ViewModel:從Model取得View所需的資料 # 什麼是元件(component)系統? 元件 (Component) 的最小單位可以只是節點,也可以是好幾個節點組合而成的元件,元件 (Component) 的最小單位可以只是節點,也可以是好幾個節點組合而成的元件,便成了元件樹 (Component tree)。 # vue2, vue3 有哪些的差異? * 引進了 "Fragment" 特性,不再限制元件必須只能是單一根節點 * 狀態的響應式偵測由 Object.defineProperty 改為 Proxy API,執行時的效能更好,也解決了過去 Vue 2.x 在物件、陣列更新偵測的問題 * 模板編譯:靜態節點優化,新的 Virtual DOM 更新時只需要遍歷動態的節點,更新時與實際 DOM 數量脫鉤,減少不必要的效能浪費 * 內建新增 "Teleport"、"Suspense" 等功能型元件,擴充了更多可能性 * 新的 Composition API 提供了另一種對程式碼、邏輯甚至是狀態的共用管理方式,擺脫過去 mixins 的混亂 * 新增 setup、ref 等語法糖,開發時的體驗更好 # 用 vue3 寫一個 hello world 需要那些程式碼? ``` const { createApp, ref } = Vue; const vm = createApp({ setup () { const message = ref('Hello Vue!'); return { message } } }); // mount vm.mount('#app'); ``` # computed/methods 差別在哪? computed 屬性會將計算後的結果暫存,若它所觀察的屬性 (也就是那些 this.XXX) 沒有被更新的情況下,computed就不會重複被執行。 # html 中 v- 開頭的屬性有什麼用途? 請舉例? **v-text / v-html / v-once / v-pre** * v-text 指令渲染的結果會無視標籤內原本的內容 * 即使 data 裡的內容是 HTML 格式的字串,用 v-text 以及兩組大括號{{ }} 的模板輸出的結果,會是原本的 HTML 字串而不會變成 HTML 來渲染:顯示的結果會是 `<h1>HELLO</h1>` 的字串。而改用 v-html 的情況:則會出現解析後的 HELLO h1 大標題。 * v-once 的作用,在於只會渲染指定的節點一次,往後就不再更新。 * 想在網頁上呈現兩組大括號,而不是將它當作模板時,就會需要 v-pre 這個指令了: # 怎麼實作一個按鈕(button)事件? ``` const vm = Vue.createApp({ data () { return { count: 0 } }, }).mount('#app'); ``` ``` <p>Count: {{ count }}</p> <button v-on:click="count++">Plus</button> ``` # 請舉例一個 v-for 的用途? **v-for 與物件** v-for 也可以用來遍歷物件形式的資料: ``` const vm = Vue.createApp({ data () { return { book: { title: '08js', author: 'Kuro', publishedAt: '2019/09' } } } }).mount('#app'); ``` ``` <div id="app"> <ul> <li v-for="val in book">{{ val }}</li> </ul> </div> ``` # 請用自己的話解釋 vue 元件的 生命週期 (life cycle) 與更新機制? * beforeCreate before 元件 被 create,元件還沒被製造 * created 元件剛被製造,資料也有了 * beforeMount 還沒與模板 (DOM 節點) 綁定 * mounted 元件跟模板的 html dom 綁定,已經有畫面了 * beforeUpdate 資料更新但畫面還沒更新 * updated 更新畫面 * beforeUnmount 準備刪除元件 * unmount 元件刪除,資料也沒了 # 心得 之前並沒有學過相關的網頁設計,看完之後讓我對這方面有一些初步的認識,也促使我去查詢相關的資料, Vue3 的這些東西看起來比較容易操作,因為它很多概念都是以圖像去表示,適合新手去使用他,有利於之後開發的使用。