1.1 命令式和聲明式

從范式上來看，視圖層框架通常分為命令式和聲明式，它們各有優缺點。作為框架設計者，應該對兩種范式都有足夠的認知，這樣才能做出正確的選擇，甚至想辦法汲取兩者的優點并將其捏合。

接下來，我們先來看看命令式框架和聲明式框架的概念。早年間流行的 jQuery 就是典型的命令式框架。命令式框架的一大特點就是關注過程。例如，我們把下面這段話翻譯成對應的代碼：

01 - 獲取 id 為 app 的 div 標簽
02 - 它的文本內容為 hello world
03 - 為其綁定點擊事件
04 - 當點擊時彈出提示：ok

對應的代碼為：

01 $('#app') // 獲取 div
02   .text('hello world') // 設置文本內容
03   .on('click', () => { alert('ok') }) // 綁定點擊事件

以上就是 jQuery 的代碼示例，考慮到有些讀者可能沒有用過 jQuery，因此我們再用原生 JavaScript 來實現同樣的功能：

01 const div = document.querySelector('#app') // 獲取 div
02 div.innerText = 'hello world' // 設置文本內容
03 div.addEventListener('click', () => { alert('ok') }) // 綁定點擊事件

可以看到，自然語言描述能夠與代碼產生一一對應的關系，代碼本身描述的是“做事的過程”，這符合我們的邏輯直覺。

那么，什么是聲明式框架呢？與命令式框架更加關注過程不同，聲明式框架更加關注結果。結合 Vue.js，我們來看看如何實現上面自然語言描述的功能：

01 <div @click="() => alert('ok')">hello world</div>

這段類 HTML 的模板就是 Vue.js 實現如上功能的方式。可以看到，我們提供的是一個“結果”，至于如何實現這個“結果”，我們并不關心，這就像我們在告訴 Vue.js：“嘿，Vue.js，看到沒，我要的就是一個 div，文本內容是 hello world，它有個事件綁定，你幫我搞定吧?！敝劣趯崿F該“結果”的過程，則是由 Vue.js 幫我們完成的。換句話說，Vue.js 幫我們封裝了過程。因此，我們能夠猜到 Vue.js 的內部實現一定是命令式的，而暴露給用戶的卻更加聲明式。