前端的三种数据绑定技术
人工智能 2025-10-08 02:45:49
0
本喵写了以下三种不同方式的前端数据绑定（只实现了单向绑定）：
第一种，使用了“脏值”检测，数据该方法是绑定 angular 的数据绑定原理。 第二种，技术使用了 es5 的前端 Object.defineProperty()，vue2 的数据数据绑定就是基于该方法。 第三种，绑定使用了 es6 的技术 Proxy ，vue3 的前端数据绑定开始全盘换为这种方式。废话不多说，数据直接撸起代码~
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> <h3>脏值检测</h3> <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> <h3>Object.defineProperty（ES5语法）</h3> <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> <h3>proxy（ES6语法）</h3> <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>04 总结
除了上面三种方式外，其实原本还有一种 Object.observe 方法，该方法是在 es7 的草案中，不过经过各位大佬的讨论，还是废弃了这种方法，只有 chrome 曾经支持过（没错，是曾经，现在不支持了），这里就不鞭尸了（懒）。上面三种方式，无疑 proxy 是一个趋势，vue3 也改用它了，相信未来几年，proxy 会得到各个技术人的热捧。高防服务器