1.看了vue 資料雙向繫結的原始碼決定 根據自己的理解 實現乙個簡單版的 vue雙向繫結
class
vue}
class
vue;
//對data 屬性進行初始化
this
.dep =
newdep()
;// 初始化訂閱列表
this
.observer
(this
.$data)
;//將data 物件傳入 觀察者方法 內進行 屬性劫持
}//觀察者
observer
(data)
,set
:function
(newval)})
}}}// 訂閱列表
class
dep//觸發 發布資訊
noify
(key))}
}
class
vue;
//對data 屬性進行初始化
this
.dep =
newdep()
;// 初始化訂閱列表
this
.observer
(this
.$data)
;//將data 物件傳入 觀察者方法 內進行 屬性劫持
}//觀察者
observer
(data)
,set
:function
(newval)})
}}}// 訂閱列表
class
dep//觸發 發布資訊
noify
(key))}
}//為了看起來方便 將上述** 一起 copy 下來並做稍微的更改
//***
class
watcher
update()
}
class
vue;
//對data 屬性進行初始化
this
.$el = document.
queryselector
(options.el)
;// 此處只考慮傳入 el 屬性的vue例項 template 不考慮（過於麻煩） 根據傳入的el 屬性值選擇出掛載節點
this
.dep =
newdep()
;// 初始化訂閱列表
this
.observer
(this
.$data)
;//將data 物件傳入 觀察者方法 內進行 屬性劫持
this
.complie
(this
.$el)
;// 解析
}//觀察者
observer
(data)
,set
:function
(newval)})
}}//解析器 （收集依賴）
complie
(el)
//找到對應的訂閱者列表 新增監聽者例項（訂閱者）
vm.dep[exp]
.push
(new
watcher
(vm,element,
function()
))}//同理 對 v-text 指令進行處理
if(element.
hasattribute
('v-text'))
))}// 如果當前元素還有子元素 那麼進行遞迴 解析
if(element.children && element.children.length)}}
}// 訂閱列表
class
dep//觸發 發布資訊
noify
(key))}
}//為了看起來方便 將上述** 一起 copy 下來並做稍微的更改
//***
class
watcher
update()
}
//html
>
this is vue 2.x<
/h3>
"text" v-model=
"inputvalue"
/>
"inputvalue"
>
<
/p>
<
/div>
//js
newvue(}
)//效果實現
vue 資料雙向繫結實現
之前每件事都差不多，直到現在才發現差很多。現在才發現理清一件事的原委是多麼快樂的一件事，我們共同勉勵。紙上得來終覺淺，絕知此事要躬行 懶得扯淡，直接正題 ps 文章略長。model view編譯器 其基於 訂閱者 發布者模式，簡單的講就是訂閱者訂閱資料，一旦訂閱的資料變更過後，更新繫結的view檢視...
vue實現雙向資料繫結
object.defineproperty 方法會直接在乙個物件上定義乙個新屬性，或者修改乙個物件的現有屬性，並返回這個物件。object.defineproperty 方法有三個引數 引數 功能 作用 obj 要修改或定義key值的物件 key 對應obj物件的裡面某有已有或要修改的屬性 opti...
Vue如何實現資料雙向繫結
說明 index.html lang en head p p v text msg p v text car.color p v html msg p v html car.color p type text v model msg v on click clickfn 點我button div...