Vue數據雙向綁定原理
Vue數據雙向綁定
Vue
是通過數據劫持的方式來實現數據雙向數據綁定的,其中最核心的方法便是通過Object.defineProperty()
來實現對屬性的劫持,該方法允許精確地添加或修改對象的屬性,對數據添加屬性描述符中的getter
與setter
實現劫持。
描述
運行一個Vue
實例並將data
打印,可以看到對象中對於msg
有了get
與set
,通過他們就可以實現數據的劫持,從而進行數據的更新,在Vue
中get
與set
是通過ES5
的Object.defineProperty()
方法定義的,該方法的具體功能可以查閱https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/defineProperty.md
。
<!DOCTYPE html>
<html>
<head>
<title>數據綁定</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Data'
},
created: function() {
console.log(this.$data); //{__ob__: Observer}
}
})
</script>
</html>
/*
{__ob__: Observer}
msg: "Data"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 1}
get msg: ƒ reactiveGetter()
set msg: ƒ reactiveSetter(newVal)
__proto__: Object
*/
分析實現
Vue
的雙向數據綁定,簡單點來說分為以下三個部分:
Observer
: 這裏的主要工作是遞歸地監聽對象上的所有屬性,在屬性值改變的時候,觸發相應的Watcher
。Watcher
: 觀察者,當監聽的數據值修改時,執行響應的回調函數,在Vue
裏面的更新模板內容。Dep
: 鏈接Observer
和Watcher
的橋樑,每一個Observer
對應一個Dep
,它內部維護一個數組,保存與該Observer
相關的Watcher
。
根據上面的三部分實現一個功能非常簡單的Demo
,實際Vue
中的數據在頁面的更新是異步的,且存在大量優化,實際非常複雜。
首先實現Dep
方法,這是鏈接Observer
和Watcher
的橋樑,簡單來說,就是一個監聽者模式的事件總線,負責接收watcher
並保存。其中subscribers
數組用以保存將要觸發的事件,addSub
方法用以添加事件,notify
方法用以觸發事件。
function __dep(){
this.subscribers = [];
this.addSub = function(watcher){
if(__dep.target && !this.subscribers.includes(__dep.target) ) this.subscribers.push(watcher);
}
this.notifyAll = function(){
this.subscribers.forEach( watcher => watcher.update());
}
}
Observer
方法就是將數據進行劫持,使用Object.defineProperty
對屬性進行重定義,注意一個屬性描述符只能是數據描述符和存取描述符這兩者其中之一,不能同時是兩者,所以在這個小Demo
中使用getter
與setter
操作的的是定義的value
局部變量,主要是利用了let
的塊級作用域定義value
局部變量並利用閉包的原理實現了getter
與setter
操作value
,對於每個數據綁定時都有一個自己的dep
實例,利用這個總線來保存關於這個屬性的Watcher
,並在set
更新數據的時候觸發。
function __observe(obj){
for(let item in obj){
let dep = new __dep();
let value = obj[item];
if (Object.prototype.toString.call(value) === "[object Object]") __observe(value);
Object.defineProperty(obj, item, {
configurable: true,
enumerable: true,
get: function reactiveGetter() {
if(__dep.target) dep.addSub(__dep.target);
return value;
},
set: function reactiveSetter(newVal) {
if (value === newVal) return value;
value = newVal;
dep.notifyAll();
}
});
}
return obj;
}
Watcher
方法傳入一個回調函數,用以執行數據變更后的操作,一般是用來進行模板的渲染,update
方法就是在數據變更后執行的方法,activeRun
是首次進行綁定時執行的操作,關於這個操作中的__dep.target
,他的主要目的是將執行回調函數相關的數據進行sub
,例如在回調函數中用到了msg
,那麼在執行這個activeRun
的時候__dep.target
就會指向this
,然後執行fn()
的時候會取得msg
,此時就會觸發msg
的get()
,而get
中會判斷這個__dep.target
是不是空,此時這個__dep.target
不為空,上文提到了每個屬性都會有一個自己的dep
實例,此時這個__dep.target
便加入自身實例的subscribers
,在執行完之後,便將__dep.target
設置為null
,重複這個過程將所有的相關屬性與watcher
進行了綁定,在相關屬性進行set
時,就會觸發各個watcher
的update
然後執行渲染等操作。
function __watcher(fn){
this.update = function(){
fn();
}
this.activeRun = function(){
__dep.target = this;
fn();
__dep.target = null;
}
this.activeRun();
}
代碼示例
這是上述的小Demo
的代碼示例,其中上文沒有提到的__proxy
函數主要是為了將vm.$data
中的屬性直接代理到vm
對象上,兩個watcher
中第一個是為了打印並查看數據,第二個是之前做的一個非常簡單的模板引擎的渲染,為了演示數據變更使得頁面數據重新渲染,在這個Demo
下打開控制台,輸入vm.msg = 11;
即可觸發頁面的數據更改,也可以通過在40
行添加一行console.log(dep);
來查看每個屬性的dep
綁定的watcher
。
<!DOCTYPE html>
<html>
<head>
<title>數據綁定</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{date}}</div>
</div>
</body>
<script type="text/javascript">
var Mvvm = function(config) {
this.$el = config.el;
this.__root = document.querySelector(this.$el);
this.__originHTML = this.__root.innerHTML;
function __dep(){
this.subscribers = [];
this.addSub = function(watcher){
if(__dep.target && !this.subscribers.includes(__dep.target) ) this.subscribers.push(watcher);
}
this.notifyAll = function(){
this.subscribers.forEach( watcher => watcher.update());
}
}
function __observe(obj){
for(let item in obj){
let dep = new __dep();
let value = obj[item];
if (Object.prototype.toString.call(value) === "[object Object]") __observe(value);
Object.defineProperty(obj, item, {
configurable: true,
enumerable: true,
get: function reactiveGetter() {
if(__dep.target) dep.addSub(__dep.target);
return value;
},
set: function reactiveSetter(newVal) {
if (value === newVal) return value;
value = newVal;
dep.notifyAll();
}
});
}
return obj;
}
this.$data = __observe(config.data);
function __proxy (target) {
for(let item in target){
Object.defineProperty(this, item, {
configurable: true,
enumerable: true,
get: function proxyGetter() {
return this.$data[item];
},
set: function proxySetter(newVal) {
this.$data[item] = newVal;
}
});
}
}
__proxy.call(this, config.data);
function __watcher(fn){
this.update = function(){
fn();
}
this.activeRun = function(){
__dep.target = this;
fn();
__dep.target = null;
}
this.activeRun();
}
new __watcher(() => {
console.log(this.msg, this.date);
})
new __watcher(() => {
var html = String(this.__originHTML||'').replace(/"/g,'\\"').replace(/\s+|\r|\t|\n/g, ' ')
.replace(/\{\{(.)*?\}\}/g, function(value){
return value.replace("{{",'"+(').replace("}}",')+"');
})
html = `var targetHTML = "${html}";return targetHTML;`;
var parsedHTML = new Function(...Object.keys(this.$data), html)(...Object.values(this.$data));
this.__root.innerHTML = parsedHTML;
})
}
var vm = new Mvvm({
el: "#app",
data: {
msg: "1",
date: new Date(),
obj: {
a: 1,
b: 11
}
}
})
</script>
</html>
每日一題
https://github.com/WindrunnerMax/EveryDay
參考
https://www.jianshu.com/p/255d4dec710a
https://www.jianshu.com/p/c8186e9e027b
https://www.cnblogs.com/wangjiachen666/p/9883916.html
https://blog.csdn.net/wangshu696/article/details/84570886
https://blog.csdn.net/qq_43051529/article/details/82877673
https://github.com/liutao/vue2.0-source/blob/master/%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A.md
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※教你寫出一流的銷售文案?
※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益
※回頭車貨運收費標準
※別再煩惱如何寫文案,掌握八大原則!
※超省錢租車方案
※產品缺大量曝光嗎?你需要的是一流包裝設計!