本篇內(nèi)容主要講解“前端的數(shù)據(jù)綁定技術有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“前端的數(shù)據(jù)綁定技術有哪些”吧!

創(chuàng)新互聯(lián)專注于網(wǎng)站建設|成都企業(yè)網(wǎng)站維護|優(yōu)化|托管以及網(wǎng)絡推廣，積累了大量的網(wǎng)站設計與制作經(jīng)驗，為許多企業(yè)提供了網(wǎng)站定制設計服務，案例作品覆蓋宣傳片制作等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身策劃品質(zhì)網(wǎng)站。

01 臟值檢測

如果綁定的數(shù)據(jù)過多，臟值檢測可能會造成性能問題，因為每次改變值，都需要進行輪詢改變對應的值。

                  
臟值檢測
   增加   重置   
     第一個綁定數(shù)據(jù)：        
   
     第二個綁定數(shù)據(jù)：        
   
     第三個綁定數(shù)據(jù)：        
        window.onload = function () {       // 首次加載需要初始化數(shù)據(jù)       apply()       bind()     }     // data     let counter = 0     // methods     function add() {       counter++     }      function reset() {       counter = 0     }     // bind event     function bind() {       let list = document.querySelectorAll("[a-click]")       list.forEach(item => {         item.onclick = function () {           window[item.getAttribute("a-click")]()           apply()         }       })     }     // bind data     function apply() {       let list = document.querySelectorAll("[a-bind='counter']")       list.forEach(item => {         if (item.innerHTML !== counter + '') {           item.innerHTML = counter         }       })     }      

02 Object.defineProperty（ES5）

該方法是目前比較主流的方法，兼容性也不錯，支持 ie8（注意：下面并沒實現(xiàn) vue2 的發(fā)布訂閱者模式，有空再擼一個出來）。

                  
Object.defineProperty（ES5語法）
   增加   重置   
     第一個綁定數(shù)據(jù)：        
   
     第二個綁定數(shù)據(jù)：        
   
     第三個綁定數(shù)據(jù)：        
        window.onload = function () {       // 首次加載需要初始化數(shù)據(jù)       apply('counter', obj.counter)       bind()     }     // data     let obj = {       _counter: 0     }     // counter 只是一個載體，真正的值存儲在 _counter     Object.defineProperty(obj, 'counter', {       get: function () {         //console.log('get:', counter)         return this._counter       },       set: function (val) {         this._counter = val         //console.log('set:', counter)         apply('counter', this._counter)       }     })     // methods     function add() {       obj.counter++     }      function reset() {       obj.counter = 0     }     // bind event     function bind() {       let list = document.querySelectorAll('[a-click]')       list.forEach(item => {         item.onclick = function () {           window[item.getAttribute('a-click')]()         }       })     }     // bind data     function apply(str, val) {       let list = document.querySelectorAll(`[a-bind=${str}]`)       list.forEach(item => {         if (item.innerHTML !== val + '') {           item.innerHTML = val         }       })     }      

03 Proxy（ES6）

相比上面兩種方法，用 es6 Proxy 來寫數(shù)據(jù)綁定，代碼會直觀很多，而且很易用，不過遺憾的是 Proxy 兼容性很差，IE 是全面不支持它，而且 babel 沒法完全將它轉(zhuǎn)為 es5 語法，雖然有 google 大佬寫的 Polyfill，但那個也是有殘缺的（不知道尤大在 vue3 里怎么解決它）。

                  
proxy（ES6語法）
   增加   重置   
     第一個綁定數(shù)據(jù)：        
   
     第二個綁定數(shù)據(jù)：        
   
     第三個綁定數(shù)據(jù)：        
        window.onload = function () {       // 首次加載需要初始化數(shù)據(jù)       apply('counter', obj.counter)       bind()     }      // data     let obj = new Proxy({       counter: 0     }, {       set: function (obj, prop, value) {         obj[prop] = value         if (prop == 'counter') {           apply('counter', value)         }         return true       }     })     // methods     function add() {       obj.counter++     }      function reset() {       obj.counter = 0     }     // bind event     function bind() {       let list = document.querySelectorAll('[a-click]')       list.forEach(item => {         item.onclick = function () {           window[item.getAttribute('a-click')]()         }       })     }     // bind data     function apply(str, val) {       let list = document.querySelectorAll(`[a-bind=${str}]`)       list.forEach(item => {         if (item.innerHTML !== val + '') {           item.innerHTML = val         }       })     }      

到此，相信大家對“前端的數(shù)據(jù)綁定技術有哪些”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！