本篇内容主要讲解“前端的数据绑定技术有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“前端的数据绑定技术有哪些”吧!
01 脏值检测
如果绑定的数据过多，脏值检测可能会造成性能问题，因为每次改变值，都需要进行轮询改变对应的值。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>脏值检测</title> </head> <body> <h4>脏值检测</h4> <button a-click="add" style="width: 40%; height: 50px;">增加</button> <button a-click="reset" style="width: 40%; height: 50px;">重置</button> <div> <span>第一个绑定数据：</span> <span id="aa" style="color:#CC6600" a-bind="counter"></span> </div> <div> <span>第二个绑定数据：</span> <span style="color:#CCCC33" a-bind="counter"></span> </div> <div> <span>第三个绑定数据：</span> <span style="color:#336699" a-bind="counter"></span> </div> <script type="text/javascript"> window.onload = function () { // 首次加载需要初始化数据 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 } }) } </script> </body> </html>02 Object.defineProperty（ES5）
该方法是目前比较主流的方法，兼容性也不错，支持 ie8（注意：下面并没实现 vue2 的发布订阅者模式，有空再撸一个出来）。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Object.defineProperty</title> </head> <body> <h4>Object.defineProperty（ES5语法）</h4> <button a-click="add" style="width: 40%; height: 50px;">增加</button> <button a-click="reset" style="width: 40%; height: 50px;">重置</button> <div> <span>第一个绑定数据：</span> <span style="color:#CC6600" a-bind="counter"></span> </div> <div> <span>第二个绑定数据：</span> <span style="color:#CCCC33" a-bind="counter"></span> </div> <div> <span>第三个绑定数据：</span> <span style="color:#336699" a-bind="counter"></span> </div> <script type="text/javascript"> window.onload = function () { // 首次加载需要初始化数据 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 } }) } </script> </body> </html>03 Proxy（ES6）
相比上面两种方法，用 es6 Proxy 来写数据绑定，代码会直观很多，而且很易用，不过遗憾的是 Proxy 兼容性很差，IE 是全面不支持它，而且 babel 没法完全将它转为 es5 语法，虽然有 google 大佬写的 Polyfill，但那个也是有残缺的（不知道尤大在 vue3 里怎么解决它）。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>proxy</title> </head> <body> <h4>proxy（ES6语法）</h4> <button a-click="add" style="width: 40%; height: 50px;">增加</button> <button a-click="reset" style="width: 40%; height: 50px;">重置</button> <div> <span>第一个绑定数据：</span> <span style="color:#CC6600" a-bind="counter"></span> </div> <div> <span>第二个绑定数据：</span> <span style="color:#CCCC33" a-bind="counter"></span> </div> <div> <span>第三个绑定数据：</span> <span style="color:#336699" a-bind="counter"></span> </div> <script type="text/javascript"> window.onload = function () { // 首次加载需要初始化数据 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 } }) } </script> </body> </html>到此，相信大家对“前端的数据绑定技术有哪些”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
