国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術(shù)文章
文章詳情頁

Vue Object.defineProperty及ProxyVue實現(xiàn)雙向數(shù)據(jù)綁定

瀏覽:173日期:2022-11-30 10:48:04

雙向數(shù)據(jù)綁定無非就是,視圖 => 數(shù)據(jù),數(shù)據(jù) => 視圖的更新過程

Vue Object.defineProperty及ProxyVue實現(xiàn)雙向數(shù)據(jù)綁定

以下的方案中的實現(xiàn)思路:

定義一個Vue的構(gòu)造函數(shù)并初始化這個函數(shù)(myVue.prototype._init) 實現(xiàn)數(shù)據(jù)層的更新:數(shù)據(jù)劫持,定義一個 obverse 函數(shù)重寫data的set和get(myVue.prototype._obsever) 實現(xiàn)視圖層的更新:訂閱者模式,定義個 Watcher 函數(shù)實現(xiàn)對DOM的更新(Watcher) 將數(shù)據(jù)和視圖層進(jìn)行綁定,解析指令v-bind、v-model、v-click(myVue.prototype._compile) 創(chuàng)建Vue實例(new myVue)

1.object.defineproperty方式實現(xiàn)雙向數(shù)據(jù)綁定

<!DOCTYPE html><html> <head> <title>myVue</title> <style> #app{ text-align: center; }</style></head> <body> <div id='app'> <form> <input type='text' v-model='number' /> <button type='button' v-click='increment'>增加</button> </form> <h3 v-bind='number'></h3> </div></body><script> // 定義一個myVue構(gòu)造函數(shù) function myVue(option) { this._init(option) } myVue.prototype._init = function (options) { // 傳了一個配置對象 this.$options = options // options 為上面使用時傳入的結(jié)構(gòu)體,包括el,data,methods this.$el = document.querySelector(options.el) // el是 #app, this.$el是id為app的Element元素 this.$data = options.data // this.$data = {number: 0} this.$methods = options.methods // this.$methods = {increment: function(){}} // _binding保存著model與view的映射關(guān)系,也就是我們前面定義的Watcher的實例。當(dāng)model改變時,我們會觸發(fā)其中的指令類更新,保證view也能實時更新 this._binding = {} this._obsever(this.$data) this._compile(this.$el) } // 數(shù)據(jù)劫持:更新數(shù)據(jù) myVue.prototype._obsever = function (obj) { let _this = this Object.keys(obj).forEach((key) => { // 遍歷obj對象 if (obj.hasOwnProperty(key)) { // 判斷 obj 對象是否包含 key屬性 _this._binding[key] = [] // 按照前面的數(shù)據(jù),_binding = {number: []} 存儲 每一個 new Watcher } let value = obj[key] if (typeof value === ’object’) { //如果值還是對象,則遍歷處理 _this._obsever(value) } Object.defineProperty(_this.$data, key, { enumerable: true, configurable: true, get: () => { // 獲取 value 值 return value }, set: (newVal) => { // 更新 value 值 if (value !== newVal) { value = newVal _this._binding[key].forEach((item) => { // 當(dāng)number改變時,觸發(fā)_binding[number] 中的綁定的Watcher類的更新 item.update() // 調(diào) Watcher 實例的 update 方法更新 DOM }) } } }) }) } // 訂閱者模式: 綁定更新函數(shù),實現(xiàn)對 DOM 元素的更新 function Watcher(el, data, key, attr) { this.el = el // 指令對應(yīng)的DOM元素 this.data = data // this.$data 數(shù)據(jù): {number: 0, count: 0} this.key = key // 指令綁定的值,本例如'number' this.attr = attr // 綁定的屬性值,本例為'innerHTML','value' this.update() } // 比如 H3.innerHTML = this.data.number; 當(dāng)number改變時,會觸發(fā)這個update函數(shù),保證對應(yīng)的DOM內(nèi)容進(jìn)行了更新 Watcher.prototype.update = function () { this.el[this.attr] = this.data[this.key] } // 將view與model進(jìn)行綁定,解析指令(v-bind,v-model,v-clickde)等 myVue.prototype._compile = function (el) { // root 為id為app的Element元素,也就是我們的根元素 let _this = this let nodes = Array.prototype.slice.call(el.children) // 將為數(shù)組轉(zhuǎn)化為真正的數(shù)組 nodes.map(node => { if (node.children.length && node.children.length > 0) { // 對所有元素進(jìn)行遍歷,并進(jìn)行處理 _this._compile(node) } if (node.hasAttribute(’v-click’)) { // 如果有v-click屬性,我們監(jiān)聽它的onclick事件,觸發(fā)increment事件,即number++ let attrVal = node.getAttribute(’v-click’) node.onclick = _this.$methods[attrVal].bind(_this.$data) // bind是使data的作用域與method函數(shù)的作用域保持一致 } // 如果有v-model屬性,并且元素是INPUT或者TEXTAREA,我們監(jiān)聽它的input事件 if (node.hasAttribute(’v-model’) && (node.tagName === ’INPUT’ || node.tagName === ’TEXTAREA’)) { let attrVal = node.getAttribute(’v-model’) _this._binding[attrVal].push(new Watcher( node, // 對應(yīng)的 DOM 節(jié)點 _this.$data, attrVal, // v-model 綁定的值 ’value’ )) node.addEventListener(’input’, () => { _this.$data[attrVal] = node.value // 使number 的值與 node的value保持一致,已經(jīng)實現(xiàn)了雙向綁定 }) } if (node.hasAttribute(’v-bind’)) { let attrVal = node.getAttribute(’v-bind’) _this._binding[attrVal].push(new Watcher( node, _this.$data, attrVal, // v-bind 綁定的值 ’innerHTML’ )) } }) } window.onload = () => { // 當(dāng)文檔內(nèi)容完全加載完成會觸發(fā)該事件,避免獲取不到對象的情況 new myVue({ el: ’#app’, data: { number: 0, count: 0 }, methods: { increment() { this.number++ }, incre() { this.count++ } } }) }</script> </html>

2.Proxy 實現(xiàn)雙向數(shù)據(jù)綁定

<!DOCTYPE html><html> <head> <title>myVue</title> <style> #app{ text-align: center; }</style></head> <body> <div id='app'> <form> <input type='text' v-model='number' /> <button type='button' v-click='increment'>增加</button> </form> <h3 v-bind='number'></h3> </div></body><script> // 定義一個myVue構(gòu)造函數(shù) function myVue(option) { this._init(option) } myVue.prototype._init = function (options) { // 傳了一個配置對象 this.$options = options // options 為上面使用時傳入的結(jié)構(gòu)體,包括el,data,methods this.$el = document.querySelector(options.el) // el是 #app, this.$el是id為app的Element元素 this.$data = options.data // this.$data = {number: 0} this.$methods = options.methods // this.$methods = {increment: function(){}} this._binding = {} this._obsever(this.$data) this._complie(this.$el) } // 數(shù)據(jù)劫持:更新數(shù)據(jù)myVue.prototype._obsever = function (data) { let _this = this let handler = { get(target, key) { return target[key]; // 獲取該對象上key的值 }, set(target, key, newValue) { let res = Reflect.set(target, key, newValue); // 將新值分配給屬性的函數(shù) _this._binding[key].map(item => { item.update(); }); return res; } }; // 把代理器返回的對象代理到this.$data,即this.$data是代理后的對象,外部每次對this.$data進(jìn)行操作時,實際上執(zhí)行的是這段代碼里handler對象上的方法 this.$data = new Proxy(data, handler); } // 將view與model進(jìn)行綁定,解析指令(v-bind,v-model,v-clickde)等 myVue.prototype._complie = function (el) { // el 為id為app的Element元素,也就是我們的根元素 let _this = this let nodes = Array.prototype.slice.call(el.children) // 將為數(shù)組轉(zhuǎn)化為真正的數(shù)組 nodes.map(node => { if (node.children.length && node.children.length > 0) this._complie(node) if (node.hasAttribute(’v-click’)) { // 如果有v-click屬性,我們監(jiān)聽它的onclick事件,觸發(fā)increment事件,即number++ let attrVal = node.getAttribute(’v-click’) node.onclick = _this.$methods[attrVal].bind(_this.$data) // bind是使data的作用域與method函數(shù)的作用域保持一致 } // 如果有v-model屬性,并且元素是INPUT或者TEXTAREA,我們監(jiān)聽它的input事件 if (node.hasAttribute(’v-model’) && (node.tagName === ’INPUT’ || node.tagName === ’TEXTAREA’)) { let attrVal = node.getAttribute(’v-model’)console.log(_this._binding) if (!_this._binding[attrVal]) _this._binding[attrVal] = [] _this._binding[attrVal].push(new Watcher( node, // 對應(yīng)的 DOM 節(jié)點 _this.$data, attrVal, // v-model 綁定的值 ’value’, )) node.addEventListener(’input’, () => { _this.$data[attrVal] = node.value // 使number 的值與 node的value保持一致,已經(jīng)實現(xiàn)了雙向綁定 }) } if (node.hasAttribute(’v-bind’)) { let attrVal = node.getAttribute(’v-bind’) if (!_this._binding[attrVal]) _this._binding[attrVal] = [] _this._binding[attrVal].push(new Watcher( node, _this.$data, attrVal, // v-bind 綁定的值 ’innerHTML’, )) } }) } // 綁定更新函數(shù),實現(xiàn)對 DOM 元素的更新 function Watcher(el, data, key, attr) { this.el = el // 指令對應(yīng)的DOM元素 this.data = data // 代理的對象 this.$data 數(shù)據(jù): {number: 0, count: 0} this.key = key // 指令綁定的值,本例如'num' this.attr = attr // 綁定的屬性值,本例為'innerHTML','value' this.update() } // 比如 H3.innerHTML = this.data.number; 當(dāng)number改變時,會觸發(fā)這個update函數(shù),保證對應(yīng)的DOM內(nèi)容進(jìn)行了更新 Watcher.prototype.update = function () { this.el[this.attr] = this.data[this.key] } window.onload = () => { // 當(dāng)文檔內(nèi)容完全加載完成會觸發(fā)該事件,避免獲取不到對象的情況 new myVue({ el: ’#app’, data: { number: 0, count: 0 }, methods: { increment() { this.number++ }, incre() { this.count++ } } }) }</script> </html>

3.將上面代碼改成class的寫法

<!DOCTYPE html><html> <head> <title>myVue</title> <style> #app{ text-align: center; }</style></head> <body> <div id='app'> <form> <input type='text' v-model='number' /> <button type='button' v-click='increment'>增加</button> </form> <h3 v-bind='number'></h3> </div></body><script> class MyVue { constructor(options) { // 接收了一個配置對象 this.$options = options // options 為上面使用時傳入的結(jié)構(gòu)體,包括el,data,methods this.$el = document.querySelector(options.el) // el是 #app, this.$el是id為app的Element元素 this.$data = options.data // this.$data = {number: 0} this.$methods = options.methods // this.$methods = {increment: function(){}} this._binding = {} this._obsever(this.$data) this._complie(this.$el) } _obsever (data) { // 數(shù)據(jù)劫持:更新數(shù)據(jù) let _this = this let handler = { get(target, key) { return target[key]; // 獲取該對象上key的值 }, set(target, key, newValue) { let res = Reflect.set(target, key, newValue); // 將新值分配給屬性的函數(shù) _this._binding[key].map(item => { item.update(); }); return res; } }; // 把代理器返回的對象代理到this.$data,即this.$data是代理后的對象,外部每次對this.$data進(jìn)行操作時,實際上執(zhí)行的是這段代碼里handler對象上的方法 this.$data = new Proxy(data, handler); } _complie(el) { // el 為id為app的Element元素,也就是我們的根元素 let _this = this let nodes = Array.prototype.slice.call(el.children) // 將為數(shù)組轉(zhuǎn)化為真正的數(shù)組 nodes.map(node => { if (node.children.length && node.children.length > 0) this._complie(node) if (node.hasAttribute(’v-click’)) { // 如果有v-click屬性,我們監(jiān)聽它的onclick事件,觸發(fā)increment事件,即number++ let attrVal = node.getAttribute(’v-click’) node.onclick = _this.$methods[attrVal].bind(_this.$data) // bind是使data的作用域與method函數(shù)的作用域保持一致 } // 如果有v-model屬性,并且元素是INPUT或者TEXTAREA,我們監(jiān)聽它的input事件 if (node.hasAttribute(’v-model’) && (node.tagName === ’INPUT’ || node.tagName === ’TEXTAREA’)) { let attrVal = node.getAttribute(’v-model’) if (!_this._binding[attrVal]) _this._binding[attrVal] = [] _this._binding[attrVal].push(new Watcher( node, // 對應(yīng)的 DOM 節(jié)點 _this.$data, attrVal, // v-model 綁定的值 ’value’, )) node.addEventListener(’input’, () => { _this.$data[attrVal] = node.value // 使number 的值與 node的value保持一致,已經(jīng)實現(xiàn)了雙向綁定 }) } if (node.hasAttribute(’v-bind’)) { let attrVal = node.getAttribute(’v-bind’) if (!_this._binding[attrVal]) _this._binding[attrVal] = [] _this._binding[attrVal].push(new Watcher( node, _this.$data, attrVal, // v-bind 綁定的值 ’innerHTML’, )) } }) } } class Watcher { constructor (el, data, key, attr) { this.el = el // 指令對應(yīng)的DOM元素 this.data = data // 代理的對象 this.$data 數(shù)據(jù): {number: 0, count: 0} this.key = key // 指令綁定的值,本例如'num' this.attr = attr // 綁定的屬性值,本例為'innerHTML','value' this.update() } update () { this.el[this.attr] = this.data[this.key] } } window.onload = () => { // 當(dāng)文檔內(nèi)容完全加載完成會觸發(fā)該事件,避免獲取不到對象的情況 new MyVue({ el: ’#app’, data: { number: 0, count: 0 }, methods: { increment() { this.number++ }, incre() { this.count++ } } }) }</script> </html>

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 国产三级视频在线 | 国产片网址 | 国产精品美女久久福利网站 | 国内成人精品视频 | 日本天堂网址 | 欧美日韩精品乱国产538 | 一区二区三区四区国产精品 | 三级全黄的视频 | 亚洲成a人不卡在线观看 | 国产高清免费不卡观看 | 国产大片线上免费观看 | 午夜性生活视频 | 美女张开腿让男人桶爽动漫视频 | 日本aaaa精品免费视频 | 国产精品吹潮在线播放 | 她也啪在线视频精品网站 | 欧美日韩一区在线观看 | 午夜香港三级a三级三点 | 韩国一级片视频 | 农村寡妇女人一级毛片 | 国产成人精品日本亚洲专 | 精品视频h | 成人入口 | 欧美黄视频网站 | 99精品视频一区在线视频免费观看 | 中日韩一区二区三区 | 成人欧美一区二区三区视频xxx | 亚洲欧美精品网站在线观看 | 黄色福利小视频 | 97视频免费在线观看 | 久久久精品视频免费观看 | 亚洲精品成人在线 | 亚洲国产成人综合 | 久久精品免费一区二区视 | 欧美日本综合一区二区三区 | 免费成人高清视频 | 国产一级a毛片高清 | 一级做a爰片久久毛片欧美 一级做a爰片久久毛片人呢 | 美女被免费网站在线视频软件 | 鲁老汉精品视频在线观看 | 韩国一级理黄论片 |