vue雙向資料繫結原理學習

整個過程分為三部分：

1、資料劫持監聽observer

2、發布訂閱者模式watcher

3、解析器complier

其實很好理解，想要實現雙向資料繫結，首先必須是檢視和資料雙向監聽：

1、資料這邊通過資料劫持的方式，可以監聽到資料的讀寫，當發現讀取資料的時候，判斷是否為訂閱者，如果是將這個物件存起來dep，下次資料有更新的時候通知訂閱者。

2、檢視這邊通過complier解析器，將逐層遍歷每個節點，判斷是否有指令屬性，並根據指令型別進行相應的操作（生成訂閱器watcher並繫結更新函式，更新函式new watcher同事新增一些更新動作：可能是監聽input（v-model）、監聽click(事件)、更新文字資訊（}）等），當生成訂閱器的時候，每次讀取資料的時候就會被存到上面說的dep中，然後下次資料更新watcher就會通知到，進而更新檢視層

小結：檢視和資料有自己的劫持、監聽方式，然後通過watcher（也就是核心發布訂閱者模式）關聯起來

資料劫持監聽observer

//建立，傳入要劫持的資料
function observer (data) 
observer.prototype = )
}, observerreactive: function (data, key, val) 
return val;
},set: function setter (newval) else 
}});
}};//建立監聽儲存器，上面提到的，每次資料劫持到監聽到被讀取的時候會判斷是否是訂閱者，是的話就會儲存
function dep()
dep.prototype = ,
notify: function () )
}};//這裡主要是為了遍歷子屬性，當資料劫持的時候，很有可能是}這種形式的，那麼裡面的物件2也是需要進行劫持監聽的
function observe(value) 
return new observer(value);
};

發布訂閱者模式watcher

function watcher (vm, attrname, callback) 
watcher.prototype = ,
start: function ()
this.callback.call(vm, nowval, oldval);
}, get: function (),
};

解析器complier

function complier (vm, el) 
complier.prototype = 
}, //碎片化
eleproducer: function (ele)
return fragment;
}, //開始解析
gocomplier: (ele) )
}, compileorder: function (node) else 
node.removeattribute(attrname);
}});
}, eventcomplier: function (node, vm, attrvalue, order) 
}, modelcomplier: function (node, vm, attrvalue, dataname) );
node.addeventlistener('input', function(e) 
self.vm[dataname] = newvalue;
val = newvalue;
});}, 
textcomplier: function (node, dataname) );
}, //根據不同的節點型別呼叫對應的更新函式
gocomplierbynodetype: function (node) \}/, text = node.textcontent;
//元素節點1，屬性節點2，文字3，一共12種，其餘的用不到
if (node.nodetype == 1) else if (node.nodetype == 3 && reg.test(text)) 
if (node.childnodes && node.childnodes.length) 
}}

最後就是通過暴露乙個全域性物件，將這些全部關聯起來，也就是vue原始碼中的index.js，肯定也是要先引入上面的watcher和observer還有complier

function qtvue (options) );
observe(this.data);
new compile(options.el, this);
options.mounted.call(this); //就像vue一樣，資料全部準備好以後進入mounted渲染dom
}qtvue.prototype = ,
set: function setter (newval) 
});}
}

最後的最後，在index.html或者main.js中直接使用就可以啦，當然要引入index.js

new qtvue(,
methods: ,
modelfun: function () 
},mounted: function () ,
created: function () {}
});

參考鏈結

vue雙向資料繫結原理學習

vue雙向資料繫結原理

vue雙向資料繫結原理

vue資料雙向繫結原理

相關推薦