不只懂 Vue 语法：Vue 的 MVVM、渐进式框架、宣告式渲染是指什麽？

问题回答

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