千鋒長沙前端培訓：Vue的雙向數據綁定原理
vue.js 是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。下面千鋒長沙前端培訓給大家說說具體實現步驟，感興趣的可以看看:
當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 都加上 setter和getter 這樣的話，給這個對象的某個值賦值，就會觸發setter，那么就能監聽到了數據變化。
compile解析模板指令，將模板中的變量替換成數據，然后初始化渲染頁面視圖，并將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖。
Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
1、在自身實例化時往屬性訂閱器(dep)里面添加自己。
2、自身必須有一個update()方法。
3、待屬性變動dep.notice()通知時，能調用自身的update()方法，并觸發Compile中綁定的回調，則功成身退。
MVVM作為數據綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model數據變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變更的雙向綁定效果
//vue實現數據雙向綁定的原理就是用Object.defineproperty()重新定義（set方法）對象設置屬性值和（get方法）獲取屬性值的操縱來實現的。
//Object.property()方法的解釋：Object.property(參數1，參數2，參數3) 返回值為該對象obj
//其中參數1為該對象（obj），參數2為要定義或修改的對象的屬性名，參數3為屬性描述符，屬性描述符是一個對象，主要有兩種形式：數據描述符和存取描述符。這兩種對象只能選擇一種使用，不能混合使用。而get和set屬于存取描述符對象的屬性。
//這個方法會直接在一個對象上定義一個新屬性或者修改對象上的現有屬性，并返回該對象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="myapp">
<input v-model="message" /><br>
<span v-bind="message"></span>
</div>
<script type="text/javascript">
var model = {
message: ""
};
var models = myapp.querySelectorAll("[v-model=message]");
for (var i = 0; i < models.length; i++) {
models[i].onkeyup = function() {
model[this.getAttribute("v-model")] = this.value;
}
}
// 觀察者模式 / 鉤子函數
// defineProperty 來定義一個對象的某個屬性
Object.defineProperty(model, "message", {
set: function(newValue) {
var binds = myapp.querySelectorAll("[v-bind=message]");
for (var i = 0; i < binds.length; i++) {
binds[i].innerHTML = newValue;
};
var models = myapp.querySelectorAll("[v-model=message]");
for (var i = 0; i < models.length; i++) {
models[i].value = newValue;
};
this.value = newValue;
},
get: function() {
return this.value;
}
})
</script>
</body>
</html>
猜你喜歡LIKE
最新文章NEW
相關推薦HOT
更多>>熱門推薦
零基礎必看的前端HTML+CSS教程
沸Java培訓新手實戰必備！單機版坦克大戰分步實現項目源碼
熱3種Javascript圖片預加載的方法詳解
熱長沙前端培訓：一招教你用vue3+canvas實現坦克大戰
新互聯網涼了？參加長沙Java培訓能找到工作嗎？
長沙Java培訓實戰項目，出游咨詢訂票系統開發流程
不參加長沙Java培訓能學會Java嗎？2022Java技能學習路線圖
千鋒長沙Java培訓分享之怎么學習Java集合？
千鋒長沙前端培訓分享之JavaScript面向對象編程思想詳解
千鋒長沙前端培訓分享之web前端的回流和重繪
千鋒長沙前端培訓分享之3種Javascript圖片預加載的方法詳解
千鋒長沙前端培訓分享之利用Jest測試React組件
千鋒長沙前端培訓分享之JavaScript中Slice的用例
千鋒長沙java培訓分享之Socket編程
京公網安備 11010802030320號