Vue原始碼分析 MVVM實現原理

2021-10-01 02:51:32 字數 1563 閱讀 4049

mvvm是model-view-viewmodel的簡寫。即模型-檢視-檢視模型。

參考：一、資料劫持-

1、object.defineproperty(obj, key, atts)

在建立vue例項的時候，通過data屬性來管理資料：

new


vue(})


;
然後使用object.defineproperty(obj, key, atts)方法來對data進行get和set操作。例如：

object.


keys


(data)


.foreach


(key =


>


,set


(newvalue)})});
以上方法就是對data物件的所有屬性進行劫持，當取值的時候，觸發get方法，當賦值的時候觸發set方法，這樣就可以在get和set方法中新增一些邏輯處理。

2、vue原始碼中的資料劫持

vue原始碼中的資料劫持在目錄/src/core/observer/index.js中的observerclass類裡，在呼叫walk函式時，呼叫definereactive函式，**如下：

object.


defineproperty


(obj, key,}}


return value


},set: function reactivesetter (newval)


/* eslint-enable no-self-compare */


if(process.env.node_env !=


='production'


&& customsetter)


// #7981: for accessor properties without setter


if(getter &&


!setter)


return


if(setter)


else


childob =


!shallow &&


observe


(newval)


dep.


notify()


}
二、繫結el和編譯模板以及指令在使用vue的時候，建立vue例項會繫結el元素節點：

new


vue(


);
三、mvvm原理圖

github原始碼：

Vue原始碼分析

在開始原始碼分析工作之前，我們在當前篇章做好相應的準備工作，以便更好地展開分析。將原始碼fork到自己的github倉庫中 git clone 自己的github vue 位址 dist 打包之後的結果 examples 示例 src compiler 編譯相關 core vue 核心庫 compo...

Vue原始碼分析 v model實現原理

最近小組有個關於vue原始碼分析的分享會，提前準備一下 前言 我們都知道使用v model可以實現資料的雙向繫結，及實現資料的變化驅動dom的更新，dom的更新影響資料的變化。那麼v model是怎麼實現這一原理的呢？接下來探索一下這部分的原始碼。gendirectives 在模板的編譯階段，v m...

Vue原始碼分析（流程分析）

使用步驟 1.編寫 頁面 模板 1.直接在html標籤中寫 2.使用template 3.使用單檔案 2.建立vue例項 1.在vue 的建構函式中 data,methods,computer,watcher,props,3.將vue掛載到頁面中 mount 資料驅動模型 vue執行流程 1.獲得模...