---
# System prepended metadata

title: 什麼是 漸進式 JavaScript 框架 (The Progressive JavaScript Framework)?

---

#  什麼是 漸進式 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 的這些東西看起來比較容易操作，因為它很多概念都是以圖像去表示，適合新手去使用他，有利於之後開發的使用。