class
vue})}
for(
let key in methods)})
}// 把資料獲取操作，vm上的取值操作都**到vm.$data
this
.proxyvm
(this
.$data)
newcompiler
(this
.$el,
this)}
}proxyvm
(data)
,set
(newval)})
}}}class
observer
observer
(data)}}
definereactive
(obj, key, value)
,set
:(newval)
=>
} school = {}
// 新值跟舊值不一樣才去更新
if(newval != value)}}
)}}class
compiler
iselementnode
(node)
// 判斷是不是指令
isdirective
(attrname)
// 編譯元素
compileelement
(node)
= attr;
//v-model= school.msg
// 判斷是不是指令if(
this
.isdirective
(name))}
)}// 編譯文字的
compiletext
(node)
}let content = node.textcontent
if(/\\}/
.test
(content))}
}}compile
(node)
else})
}// 把節點移動到記憶體中
node2fragement
(node)
return fragment
}}// 觀察者(發布訂閱) 觀察者 被觀察者
class
watcher
get(
)// 更新操作，資料變化後，會呼叫觀察者update方法
update()
}}class
dep// 訂閱
addsub
(watcher)
// 發布
notify()
}compileutil =
, vm.$data)},
setvalue
(vm, expr, value)
return data[current]
}, vm.$data)},
model
(node, expr, vm)
)// 給input新增乙個事件
node.
addeventlistener
('input'
,(e)
=>
)let value =
this
.getval
(vm, expr);fn
(node, value)},
html
(node,expr,vm)
)let value =
this
.getval
(vm, expr);fn
(node, value)},
// 遍歷表示式 將內容重新替換成乙個完整的內容，返還回去
getcontentvalue()
\}/g,(
...args)
=>)}
,on(node,expr,vm,eventname))}
,text
(node, expr, vm)
}let fn =
this
.updater[
'textupdater'];
let content = expr.
replace
(/\\}/g,(
...args)
=>
}都加上觀察者
newwatcher
(vm, args[1]
,()=>
)return
this
.getval
(vm, args[1]
)});
fn(node, content)},
updater:
,htmlupdater
(node,value)
,// 處理文字節點
textupdater
(node, value)
}}
vue雙向資料繫結原理
vue應用的是mvvm框架，view和model分離，然後通過vm雙向資料繫結，div 原生物件即資料 var data 建立乙個 viewmodel 例項 var vm new vue 然而乙個動態資料的繫結，是怎麼實現的呢，首先vue利用es5的defineproperty方法裡的get，set...
vue雙向資料繫結原理
text id text show p var text document.getelementbyid text show document.getelementbyid show var model object.defineproperty model,name set function ne...
vue資料雙向繫結原理
vue的資料雙向繫結的小例子 html index.js function selfvue data,el,exp 對data的每一層級的屬性進行監聽，如果變化執行notify observe data 初始化模板資料的值 el.innerhtml this data exp new watcher...