當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS双向数据绑定的原理介绍
生活随笔
收集整理的這篇文章主要介紹了
JS双向数据绑定的原理介绍
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.雙向數據綁定的原理：屬性攔截
2.屬性攔截實現方式 ： 使用Object.defineProperty()將對象的屬性變成訪問器屬性。
3.如果對訪問器屬性不是很了解的小伙伴可以看一下這一篇文章哈：JS數據屬性與訪問器屬性
4.本小節主要模擬vue的雙向數據綁定原理，由于vue渲染數據使用了虛擬DOM技術，比較復雜，所以這里筆者就稍微了寫簡單一些哈。主要的目的是為了雙向綁定的原理，而不是虛擬DOM渲染的原理。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div id="app"><input type="text" placeholder="請輸入文本" v-model="{{ msg }}"><br>您輸入的文本是：<p>{{ msg }}</p> <br><button onclick="app.msg = '我是黑馬保健坤'">點我修改文本</button></div><script>function hmVue(obj) {//querySelector默認只會獲取滿足選擇器條件的第一個元素// vue的掛載點el只能選中一個元素的原理this.el = document.querySelector(obj.el);// vue會將data對象中的成員平鋪到vue實例中this.msg = obj.data.msg;this._msg = this.msg;/* 雙向數據綁定的原理 ： 屬性攔截*///1.監聽data -> 開始監聽data中的數據變化Object.defineProperty(this, "msg", {get: function () {console.log('有人想要讀取我的值');return this._msg;},set: function (newValue) {console.log('外部賦值時的傳參' + newValue);this._msg = newValue;// data值變化 ： 修改input的value值input.value = newValue;// data值變化 ： 渲染到頁面var p = document.querySelector('p');p.innerText = newValue;}});//2.監聽input -> 開始監聽input表單的value值變化//利用屬性選擇器，選中使用了 v-model指令的表單元素var input = document.querySelector(`${obj.el} [v-model]`);//監聽輸入框value值變化（這里我直接使用了oninput事件），其實使用屬性攔截不僅可以讓表單元素實現雙向數據綁定，還可以讓頁面任何元素都能實現雙向數據綁定input.oninput = function(){// input值變化 ， 修改data中的數據this.msg = input.value;}.bind(this);};var app = new hmVue({el: '#app',data: {msg: ''}});</script> </body></html>總結
以上是生活随笔為你收集整理的JS双向数据绑定的原理介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nodejs服务端MVC架构介绍
- 下一篇： JS经典面试题03-引用类型连续赋值a.