前端的三种数据绑定技术

本喵写了以下三种不同方式的数据绑定（只实现了单向绑定）：

创新互联建站专注于企业营销型网站建设、网站重做改版、武陵源网站定制设计、自适应品牌网站建设、H5场景定制、商城网站制作、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为武陵源等各大城市提供网站开发制作服务。

第一种，使用了“脏值”检测，该方法是 angular 的数据绑定原理。
第二种，使用了 es5 的 Object.defineProperty()，vue2 的数据绑定就是基于该方法。
第三种，使用了 es6 的 Proxy ，vue3 的数据绑定开始全盘换为这种方式。

废话不多说，直接撸起代码~

01 脏值检测

如果绑定的数据过多，脏值检测可能会造成性能问题，因为每次改变值，都需要进行轮询改变对应的值。

第二个绑定数据：

02 Object.defineProperty（ES5）

该方法是目前比较主流的方法，兼容性也不错，支持 ie8（注意：下面并没实现 vue2 的发布订阅者模式，有空再撸一个出来）。

Object.defineProperty
Object.defineProperty（ES5语法）
增加
重置
第一个绑定数据：
第二个绑定数据：
第三个绑定数据：
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
}
})
}

03 Proxy（ES6）

相比上面两种方法，用 es6 Proxy 来写数据绑定，代码会直观很多，而且很易用，不过遗憾的是 Proxy 兼容性很差，IE 是全面不支持它，而且 babel 没法完全将它转为 es5 语法，虽然有 google 大佬写的 Polyfill，但那个也是有残缺的（不知道尤大在 vue3 里怎么解决它）。

proxy
proxy（ES6语法）
增加
重置
第一个绑定数据：
第二个绑定数据：
第三个绑定数据：
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
}
})
}

04 总结

除了上面三种方式外，其实原本还有一种 Object.observe 方法，该方法是在 es7 的草案中，不过经过各位大佬的讨论，还是废弃了这种方法，只有 chrome 曾经支持过（没错，是曾经，现在不支持了），这里就不鞭尸了（懒）。上面三种方式，无疑 proxy 是一个趋势，vue3 也改用它了，相信未来几年，proxy 会得到各个技术人的热捧。

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

前端的三种数据绑定技术

01 脏值检测

脏值检测

02 Object.defineProperty（ES5）

Object.defineProperty（ES5语法）

03 Proxy（ES6）

proxy（ES6语法）

04 总结