指令式渲染 imperative redering

jquery

在框架還沒出來時jquery依舊是非常火紅的，而其對於DOM的渲染方式就是透過
選擇器 document.querySelector 去選擇HTML裡面的tag，從而去修改他們的值或是addEventListener 加入事件監聽來獲取使用者的行為，進而在js裡面做一些判斷後再把資料丟到頁面讓使用者看到。

而這些都是指令式渲染，也就是直接透過指令直接對DOM做操作，而當整個程式架構變得很大時，對於這些變數或是事件的管理就會變得相對困難(東一塊西一塊的選擇器，也就是你會看到一堆的querySelector以及addEventListener)，易讀性也會很差，因為沒有一個集中管理的地方。

宣告式渲染 declarative rendering

Vue MVVM

以例子來說：

<div id='app'>
    <div>{{data}}</div>
    <inpup v-model="data" />
</div>

const app = createApp({
    data(){
        return {
            data:'hello world'
        }
    }
}).mount('#app')

透過以上寫法可以把createApp裡面的data的值傳遞到html 裡面大括號 {{}} 框起來的data中顯示在畫面上。
在vue中如果有多個地方需要用到data這個變數，只需用大括號及可以讓其值顯示在html，不需要像是jquery透過選擇器的方式去綁定資料，畫面也相對簡潔。

MVVM MVC

MVVC是由Model / View / ViewModel組成，早期微軟提出的是把網頁分成model層與view層，也就是把畫面與狀態分離(MVC)，Vue則是加入viewModel，也就是在view與model之間插入viewModel去把model層的資料綁定以及監聽view層的事件。

React Virtual DOM

React會先複製一份DOM物件(稱之為Virtual DOM)，而在React中是使用useState去改變想顯示在view上的值，當這些state被改變時他會去修改virtual dom，而後再去與先前的dom做比較，找出差異的地方再去對DOM做渲染，而這個渲染單純只有渲染被修改的，其他沒有變化的部分不會影響，如此一來不會因為要重新渲染整個畫面而造成效能低落。

應該還有很多細節部分沒提到，未來有碰到更多再來補充更完整。

參考資料 : 重新認識 Vue.js | Kuro Hsu