實(shí)現(xiàn)訂閱模型：
// 訂閱型模型
let Dep = {
//訂閱模型三個重要組成部分：1.容器 2.添加訂閱 3.發(fā)布訂閱
//容器
containterlist :{},
//添加
listen:function(key,fn){
// if(!this.containterlist [key]){
// this.containterlist [key] = [];
// }
// this.containterlist [key].push(fn);
//以上等同于下面
(this.containterlist [key] || (this.containterlist [key]=[])).push(fn);
},
//發(fā)布
trigger:function(){
let key = Array.prototype.shift.call(arguments),
fns = this.continterList[key];
if(!fns || fns.length ===0){
return false;
}
for(let i =0,fn;fn=fns[i++];){
fn.apply(this,arguments);
}
}
}
//數(shù)據(jù)劫持
let dataWatch = function({data,tag,datakey,selector}){
let value = "",
el = document.querySelector(selector);
Object.defineProperty(data,datakey,{
//取值
get:function(){
console.log("取值");
return value;
},
set:function(val){
console.log("設(shè)置值");
value = val;
//發(fā)布
Dep.trigger(tag,val);
}
})
//訂閱
Dep.listen(tag,function(text){
el.innerHTML = text;
})
}
測試：
image
image
數(shù)據(jù)綁定:
更新或新增data中某屬性值埋心，界面涉及到該屬性的節(jié)點(diǎn)都會更新指郁。
數(shù)據(jù)劫持（v-model）：
Object.defineProperty()
vue2的響應(yīng)式原理：
image
