前端的三种数据绑定技术
发布时间：2025-11-03 14:15:31 作者：玩站小弟 
我要评论
我要评论本喵写了以下三种不同方式的数据绑定只实现了单向绑定）：第一种，使用了“脏值”检测，该方法是 angular 的数据绑定原理。 第二种，使用了 es5 的 Object.definePro
。
本喵写了以下三种不同方式的前端数据绑定（只实现了单向绑定）：
第一种，使用了“脏值”检测，数据该方法是绑定 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 会得到各个技术人的热捧。云服务器提供商
相关文章
电脑驱动重装教程（轻松学会电脑驱动重装，解决设备冲突和性能问题）
摘要：现如今，电脑已经成为人们生活和工作中必不可少的工具。但是，随着时间的推移，电脑的驱动程序可能会出现问题，导致设备冲突和性能下降。为了解决这些问题，我们需要学会如何重新安装电脑驱动。...2025-11-03
网络安全研究人员发现斯柯达和大众汽车的某些车型的车载娱乐系统中存在多个漏洞，这些漏洞可能让黑客远程跟踪并访问用户的敏感数据。专门从事汽车网络安全的公司PCAutomotive最近在Black Hat2025-11-03- 大家好！今天我们来聊聊一个超级酷的技术——向量数据库。这玩意儿可不简单，它能够存储和检索像向量这样的数据结构，这对于处理大规模的机器学习模型和数据集来说，简直是神器！向量数据库是啥？想象一下，你有一堆2025-11-03
前两天假期，难得空闲几天，抽空看一本营销类书籍《跨越鸿沟》。这本书由杰弗里·摩尔编写，重点讲述了高科技企业在早期市场和主流市场间存在的鸿沟问题，并讲述如何能够顺利迈过鸿沟进入主流市场，赢得广泛用户并取2025-11-03- 摘要：在日常生活中，我们经常需要更改无线网络密码，以确保我们的网络安全。本文将详细介绍如何通过电脑来更改WiFi密码，为您提供一份简明扼要的操作指南。文章目录：1.确定网络连...2025-11-03
Zabbix存在SQL注入漏洞CVE-2024-42327），该漏洞是由于在Zabbix前端的CUser类中的addRelatedObjects函数未对输入数据进行充分验证和转义，导致具有API访问权2025-11-03
最新评论