vue響應式資料的實現原理解析

今天講下vue的響應式資料，也就是mvvm雙向繫結模式，主要的目的是要讓大家了解該模式在vue中是如何實現的，所以將以極簡的**進行示例。

我們先假設這樣的乙個使用情景：

type="text" v-model="text">

}複製**

let  vm=new vue(
});複製**

這裡就涉及到了vue的雙向繫結。

接下來我就用一些非常簡單**實現以上功能。

首先，我們得解析vue中的v-model指令，也就是html中的自定義屬性，以及插入元件中的變數}。這兩者都與響應式資料text有關。

vue2.x後就使用了虛擬dom和diff演算法，但今天的目的是理解雙休繫結的原理，為了方便大家的理解，這裡使用vue1.x用過document fragment來代替。document fragment是乙個節點片段，對它的進行dom操作不會導致頁面的重排和重繪。它就是乙個優化dom操作的物件。具體的大家可以參考下mdn教程。

/**
* 節點轉換成節點片段，優化動態改變節點的效能
* @param root - vue的根節點
* @param vm - vue例項
*/function nodetoframge(root,vm) 
return df;
}複製**

如何解析呢，一般就是遍歷dom節點了，然後判斷其中的節點型別，是元素節點就獲取其中的屬性節點，然後再進行遍歷，最後獲取到v-model屬性，簡單示例：

/** *編譯模板 * @param node - vue管理的節點 * @param vm - vue例項

*/複製**

function compile(node,vm) );
//刪除v-model自定義屬性
node.removeattribute('v-model');}}
}}複製**

而當遍歷到文字節點時：

//節點為文字型別
else
if(node.nodetype===3)\}/;
//找出響應式資料
if(reg.test(node.nodevalue))
}複製**

然後我們開始為每個插入dom的中資料實現乙個觀察者：

/**
* 觀察者
* @param vm
* @param node
* @param name
* @constructor
*/function watcher(vm,node,name) 
//更新資料
watcher.prototype.update=function
() ;複製**

然後資料劫持，註冊觀察者。資料劫持主要用到了object.defineproperty方法，具體的同學可以看mdn的教程。

/**
* 資料劫持
* @param vm
*/function definereactive(vm) ,
get:function
() })
})}複製**

並為每個響應式的屬性實現乙個監聽者：

/**
* 監聽者
* @constructor
*/function
moniter
() //觸發觀察者
moniter.prototype.dispatch=function
() )
};//註冊觀察者
moniter.prototype.addwatcher=function (target) ; 複製**

vue的觀察者並不是乙個函式，而是乙個對像，如watcher物件。每個屬性都有乙個監聽者，就是儲存觀察者的陣列。觀察者和監聽者之間又個全域性標準，判斷是否要實現資料監聽。view到model方向的資料變化是js的事件監聽實現的，也算是內建的觀察者模式吧，在編譯模板的時候就已經實現觀察者的註冊，mode到view方向的資料變化是自定義的觀察者模式。在編譯模板中建立觀察者，在為資料建立訪問器屬性時建立堅監聽者，在get方法中註冊觀察者，在set方法中觸發***。

整體來說就是元素提取，模板編譯，事件監聽。

/**
* vue類
* @param options - 配置的資料
* @constructor
*/function vue(options) 複製**

可以直接執行得到示例**

參考：vue.js雙向繫結的實現原理（這篇文章寫得很好）

vue響應式資料的實現原理解析

vue響應式原理解析

Vue響應式原理深入解析

簡單理解vue響應式原理

vue響應式資料的實現原理解析

vue響應式原理解析

Vue響應式原理深入解析

簡單理解vue響應式原理

相關推薦