問題回答

Vue 的 MVVM 是由 View（畫面）、ViewModel（Vue 實體）、Model（資料）組成。 由 ViewModel 把 View 和 Model 進行綁定，當其中一方更新時，就會影響另一方。至於宣告式渲染，即是當我們要完成一個工作時，不需要把每個步驟都寫出來，因為 Vue 會有相應的程式去幫助我們完成這些步驟。最後，漸進式框架是指此框架並非一個具有全面功能的框架，我們能依照專案的需求，另外加入一些第三方套件，逐步完善這個框架的功能。

以下會詳細說明這些概念。

Vue.js 的宣告式渲染

宣告式：

• 只需專注寫出你想完成的工作，並不需要把所有步驟都寫出來
• 程式碼之間不會互相依賴

指令式：

• 一步步把你想要達成的工作步驟寫出來
• 程式碼之間會互相依賴，導致只要有一個地方缺少了，整個程式碼就不能動

先舉一個具體例子，我們想用跑迴圈的方式，把一個陣列裏的所有資料，全都顯示在畫面中。

在 Vue，我們大多會使用 v-for來達成。我們不用自己動手去寫這個迴圈，也不用考慮當陣列的內容更新後，要怎樣更新DOM以及畫面。相反，指令式就是我們要把以上提到寫迴圈、更新畫面等步驟，都要自己寫出來，一步步達成我們想要的結果。

回到最基本 Vue 渲染畫面的做法，同樣是宣告式渲染。例如，當我在 input 欄位輸入文字後，下面的<p>段落要立即顯示我所輸入的文字。

如果是 Vue，基於宣告式的做法，我們只需要：

• 使用 v-model 綁定該 input 欄位
• 直按在 HTML 模版裏的 <p> 裏，使用 {{ 該 v-model 所綁定的那筆資料 }} 這樣的寫法。把在 input 欄位所輸入的文字，即時顯示在 <p> 段落裏。

如果是指令式，就有機會寫成以下步驟：

• 用 .addEventListener() 的方法監聽 input 事件
• 當 input 事件觸發後，用 document.querySelector 等相關的語法，抓取 <p> 段落的 DOM。同時也把在 input 欄位所輸入的內容抓出來。
• 把抓出來的文字內容寫進去此 <p> 段落，完成更新畫面。

在前者，我們只需指定要綁定和顯示什麼資料，其餘全都由 Vue 負責處理。反之，在後者，我們需要把每一步都寫好，而且大多時候下一步是依賴上一步的程式碼。

MVVM 概念

圖片來源：https://012.vuejs.org/guide/

Vue 沿用 MVVM 概念來實現資料綁定和更新。所謂 MVVM 是指 View（畫面）、ViewModel（Vue 實體）、Model（資料）。

關於 View ，即是透過把 Vue 實體掛載在指定的網頁節點上。
HTML 程式碼：

<div id="app">
<!-- 把 Vue 實體掛載在這裏 -->
</div>

Vue 2 掛載 Vue 實體的寫法有兩種，包括使用 $mount() 方法和設定 el 屬性：

// Vue 2

const vm = new Vue({
  data: {
    message: 'Vue 2'
  }
});

vm.$mount('#app');

// 或者

const app = new Vue({
  el: '#app',
  data: {
    message: 'Vue 2'
  }
})

Vue 3 掛載 Vue 實體的寫法：

// Vue 3

const vm = Vue.createApp({
  data () {
    return {
      message: 'Vue 3'
    }
  }
});

vm.mount('#app');

不論是 Vue 2 或是 Vue 3，同樣是用 new Vue() 或 .createApp() 的方法，產生一個 Vue 實體物件，並掛載在指定的 DOM 節點上。當編譯完成後，這個 View 就會響應資料（model）的變動而作出更新。

關於資料（Model），它是 Vue 實體裏的 data 物件，也是我們平時寫 Vue 時存放資料的地方。所有存放在 data 屬性裏的值都是響應式（reactive），意思是當這些資料有更動時會自動更新 View （畫面）。

這有賴於圖中中間部分提到的 ViewModel。官方文件常用 vm 這變數來指向 Vue 實體，其實就是 ViewModel 的縮寫。它會做以下的事：

• 綁定我們所指定的 DOM 元素（View）
• 綁定一個 JavaScript 的物件 — data（Model）。
• 在編譯 Vue 實體時，ViewModel 會監聽整個 DOM，並把 DOM 用到的指令（directives）以及 data 裏的資料連結起來，當資料更新時，就會更新畫面。同時，當使用者在畫面觸發事件，也會透過 ViewModel，更新在 Model 裏的資料。

在畫面中我們會用不同的 v-on 指令，例如@click="..."、@input="..." 來實現監聽 DOM 事件。在 DOM 事件裏，Vue 會加上一個額外的屬性，targetVM，並指向這個 ViewModel。

作用之一就是省去了我們自己用 document.getElementById() 之類的原生 JavaScript 來取得 DOM，並使用 addEventListener 的語法來監聽這個 DOM 的事件。

以下是更詳細的概念圖：

圖片來源：https://012.vuejs.org/guide/

關於 Watcher、getter 與 setter 的部分，Vue 2 和 Vue 3 的做法略有不同，在之後的文章會針對作解說。

漸進式框架

Vue 是一個漸進式框架（progressive framework）。對比其他框架，Vue 並非大型和全面的框架，此框架主要是專注於如何把資料呈現在畫面，其他功能，例如是路由、狀態集中管理等，還是要配合其他第三方函式庫或工具來處理。因此，使用 Vue 開發時，我們很常會一同搭配使用 Vuex、Vue router、Vue CLI 等工具。

總結

• Vue 使用宣告式渲染，開發者只需注重資料部分，Vue 會負責顯示以及更新資料。
• Vue 採用 MVVM 模式，意思是 View（畫面）、ViewModel（Vue 實體）、Model（資料）。ViewModel 會綁定一個指定的 DOM 並實行監聽，同時也會綁定資料。當其中一方更動時，就會更新另一方。
• Vue 是漸進式框架，並非大型和全面的框架，意思是 Vue 的核心功能只是把資料呈現在畫面上，如果我們需要實現其他功能，就要再引入其他函式庫或工具。

參考資料

重新認識 Vue.js - Vue.js 簡介
The Most Important Feature in Vue
Vue.js，何謂漸進式框架？
Listening for Events