---
# System prepended metadata

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

---

# 1. 什麼是 漸進式 JavaScript 框架 (The Progressive JavaScript Framework)?
開發者可以根據自己的需求使用想要的功能，選擇需要的工具。
# 2.什麼是 MVVM 模式?
MVVM是Model-View-ViewModel的縮寫。Model層代表數據模型，可以在Model中定義數據修改和操作的業務邏輯；View代表UI組件，它負責將數據模型轉化成UI展現出來，ViewModel是從Model取得View所需的資料。
# 3.什麼是元件(component)系統?
元件系統提供了HTML DOM元素的擴充性，也可將部分模板、程式碼封裝起來以便開發者維護及重複使用。
# 4.Vue2, Vue3 有哪些的差異?
1.引進了 “Fragment” 特性，不再限制元件必須只能是單一根節點
2.生命週期的變化，使用setup代替了之前的 beforeCreate 和created
3.新的 Composition API 提供了另一種對程式碼、邏輯甚至是狀態的共用管理方式，擺脫過去 mixins 的混亂
4.允許使用者能夠自由地表達、組合和重用有狀態的元件邏輯，同時提供ypeScript支援
# 5.用 vue3 寫一個 hello world 需要那些程式碼?
```
<div id="app">
  <h1>{{ message }}</h1>
</div>
```
```
const vm = Vue.createApp({
  data() {
      return {
            message: 'hello world'
     }
  }
}).mount('#app');
```
# 6.computed/methods 差別在哪?
computed只會在其依賴的資料改變時，重新計算求值，只要computed property原始資料沒有更動，Vue並不會重新求取computed property，而是訪問其緩存結果；另外，method則是一旦觸發重新渲染便會重新執行函式。
# 7.html 中 v- 開頭的屬性有什麼用途? 請舉例?
透過指令的作用與改變狀態(資料)的變化來操作整個網頁系統
例:
v-once:只會渲染指定的節點一次，往後就不再更新。
v-text:指令渲染的結果會無視標籤內原本的內容。
# 8.怎麼實作一個按鈕(button)事件?
```
const vm = Vue.createApp({
 data () {
  return {
  count: 0
  } 
  },
  }).mount('#app');
```
```
<p>Count: {{ count }}</p>
<button v-on:click="count++">Plus</button>
```
# 9.請舉例一個 v-for 的用途?
v-for:將「陣列」或「物件」類型的資料進行迭代渲染
可以顯示陣列中item跟index的值
# 10.請用自己的話解釋 vue 元件的 生命週期 (life cycle) 與更新機制?
**Vue 的實體物件從建立、掛載、更新，到銷毀移除，這個過程稱為生命週期**

beforeCreate
元件還沒被製造，無法使用 Vue 裡面的功能
created
元件被製造出了，可以拿到Vue裡面的資料
beforeMount
載入 HTML 至 Virtual DOM，還沒與模板綁定
mounted
透過 Vue 進行渲染 HTML，取代原本的元素內容
beforeUpdate
當狀態被變動時，畫面同步更新前
updated
當狀態被變動時，畫面已同步更新完成
beforeUnmount
Vue 實體物件被銷毀前
unmount
Vue 實體物件被銷毀完畢
# 心得
先前不曾學過相關得網頁設計課程，讀完內容後有學到了不少新知識。Vue3的出現比起過去Vue2變得更加容易上手，能夠方便去做使用，有利於之後的開發設計。
