關(guān)于 vue 的原理主要有兩個(gè)重要內(nèi)容，分別是 mvvm 數(shù)據(jù)雙向綁定原理，和 響應(yīng)式原理

1. MVC（Model-View-Controller）：

   • Model（模型）：表示應(yīng)用程序的數(shù)據(jù)和業(yè)務(wù)邏輯。
   • View（視圖）：負(fù)責(zé)展示數(shù)據(jù)給用戶，并且接受用戶的輸入。
   • Controller（控制器）：負(fù)責(zé)處理用戶的輸入和操作，當(dāng)用戶與頁(yè)面產(chǎn)生交互的時(shí)候開始工作，然后調(diào)用model 層修改model
   • view 和 model 應(yīng)用了觀察者模式，當(dāng) model 層發(fā)生改變的時(shí)候它會(huì)通知有關(guān)的view 層更新
   • 【箭頭方向統(tǒng)一的三角形】
   • view -> controller ->model -> view
   • 缺點(diǎn)：view 層和 model 層 耦合在一起，當(dāng)項(xiàng)目邏輯復(fù)雜是，會(huì)造成代碼混亂。

2. MVP（Model-View-Presenter）：

   • Model（模型）：同樣表示應(yīng)用程序的數(shù)據(jù)和業(yè)務(wù)邏輯。
   • View（視圖）：負(fù)責(zé)展示數(shù)據(jù)給用戶，并且接受用戶的輸入。
   • Presenter（主持人）：將 model 的變化和view 的變化綁定在一起，(1) 實(shí)現(xiàn) view 和 model 同步更新，(2)?實(shí)現(xiàn) view 和 model 的解藕，還包含了其他的響應(yīng)邏輯
   • view -> presenter?
   • presenter -> view
   • presenter -> model【沒有model-presenter 的箭頭】

3. MVVM（Model-View-ViewModel）：

   • Model（模型）：同樣表示應(yīng)用程序的數(shù)據(jù)和業(yè)務(wù)邏輯。
   • View（視圖）：負(fù)責(zé)展示數(shù)據(jù)給用戶，并且接受用戶的輸入。
   • ViewModel（視圖模型）：負(fù)責(zé)將模型的數(shù)據(jù)轉(zhuǎn)換為視圖所需的格式，并且處理視圖的用戶交互。視圖模型通過數(shù)據(jù)綁定與視圖進(jìn)行連接。
   • MVVM 模式通常利用雙向數(shù)據(jù)綁定來(lái)實(shí)現(xiàn)視圖和視圖模型之間的通信。
   • 思想和 mvp 是相同的，不過通過雙向數(shù)據(jù)綁定，將 view 和model 的同步更新自動(dòng)化了。
     • ?model 發(fā)生變化，viewmodel 會(huì)自動(dòng)更新
     • viewmodel 變化了， view 也會(huì)自動(dòng)更新

vue 中 mvvm 數(shù)據(jù)雙向綁定原理/響應(yīng)式原理

本質(zhì)【數(shù)據(jù)劫持】+【發(fā)布訂閱模式】

? ? ? ? 注意【發(fā)布訂閱模式】和【觀察者模式】是有區(qū)別的

1. 數(shù)據(jù)劫持 Observer
   1. vue2 使用 Object.definedProperty
   2. vue3 使用 proxy
   3. 第一步，就是把所有的變量變成響應(yīng)式對(duì)象，都能夠觸發(fā)對(duì)應(yīng)的 getter 和 setter
   4. vue 會(huì)創(chuàng)建一個(gè) dep 對(duì)象，存儲(chǔ)當(dāng)前屬性的所有 watcher 對(duì)象【dep 類似于發(fā)布訂閱中的那個(gè)存儲(chǔ)所有事件的數(shù)組】【watcher 對(duì)象類似于發(fā)布訂閱中的事件名稱】
   5. 【依賴收集】當(dāng)屬性的 getter 被訪問時(shí)，watcher 對(duì)象將會(huì)被添加到 dep 中【相當(dāng)于訂閱發(fā)布中的 on 方法】
   6. 當(dāng)屬性的 setter 被調(diào)用時(shí)，dep 中所有 watcher 對(duì)象將會(huì)被通知執(zhí)行更新【相當(dāng)于發(fā)布訂閱中的 emit 方法】
   7. 在數(shù)據(jù)劫持的步驟進(jìn)行依賴收集
   8. observer 監(jiān)聽自己的 model 數(shù)據(jù)變化
2. compile 模版編譯
   1. 將vue模版編譯成渲染函數(shù)【h 函數(shù)】
   2. vue 將模版中的數(shù)據(jù)綁定語(yǔ)法（如?{{}} 和 v-model）轉(zhuǎn)換為對(duì)數(shù)據(jù)的 getter/setter 的調(diào)用
   3. 對(duì)每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)【相當(dāng)于發(fā)布訂閱中的回調(diào)函數(shù)】
   4. 添加監(jiān)聽數(shù)據(jù)的訂閱者，數(shù)據(jù)變動(dòng)時(shí)，收到通知，更新視圖
3. Watcher 監(jiān)聽器
   1. 對(duì)應(yīng)發(fā)布/訂閱模式中的訂閱者【就是 on(''change-name", fn) 中的 change-name這個(gè)方法】
   2. 在自身實(shí)例化時(shí)往屬性訂閱器 dep 里添加自己
   3. 自身有一個(gè)更新函數(shù)
   4. dep.notice 通知時(shí)，調(diào)用自身的 update 方法，并觸發(fā) compile綁定的回調(diào)
   5. 利用 watcher 搭起 observer 和 compile 之間的通信橋梁
   6. 達(dá)到 數(shù)據(jù)變化 -> 視圖更新，視圖交互變化-> 數(shù)據(jù) model 變化的雙向綁定效果