關于 vue 的原理主要有兩個重要內容，分別是 mvvm 數據雙向綁定原理，和 響應式原理

1. MVC（Model-View-Controller）：

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

2. MVP（Model-View-Presenter）：

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

3. MVVM（Model-View-ViewModel）：

   • Model（模型）：同樣表示應用程序的數據和業務邏輯。
   • View（視圖）：負責展示數據給用戶，并且接受用戶的輸入。
   • ViewModel（視圖模型）：負責將模型的數據轉換為視圖所需的格式，并且處理視圖的用戶交互。視圖模型通過數據綁定與視圖進行連接。
   • MVVM 模式通常利用雙向數據綁定來實現視圖和視圖模型之間的通信。
   • 思想和 mvp 是相同的，不過通過雙向數據綁定，將 view 和model 的同步更新自動化了。
     • ?model 發生變化，viewmodel 會自動更新
     • viewmodel 變化了， view 也會自動更新

vue 中 mvvm 數據雙向綁定原理/響應式原理

本質【數據劫持】+【發布訂閱模式】

? ? ? ? 注意【發布訂閱模式】和【觀察者模式】是有區別的

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