前端的三种数据绑定技术

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

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

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

01 脏值检测

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

  
  
  



  
脏值检测
  增加
  重置
  

    第一个绑定数据：
    
  
  

    第二个绑定数据：
    
  
  

    第三个绑定数据：
    
  
  

02 Object.defineProperty（ES5）

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

  
  
  



  
Object.defineProperty（ES5语法）
  增加
  重置
  

    第一个绑定数据：
    
  
  

    第二个绑定数据：
    
  
  

    第三个绑定数据：
    
  
  

03 Proxy（ES6）

—

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

  
  
  



  
proxy（ES6语法）
  增加
  重置
  

    第一个绑定数据：
    
  
  

    第二个绑定数据：
    
  
  

    第三个绑定数据：
    
  
  

04 总结

    除了上面三种方式外，其实原本还有一种 Object.observe 方法，该方法是在 es7 的草案中，不过经过各位大佬的讨论，还是废弃了这种方法，只有 chrome 曾经支持过（没错，是曾经，现在不支持了），这里就不鞭尸了（懒）。上面三种方式，无疑 proxy 是一个趋势，vue3 也改用它了，相信未来几年，proxy 会得到各个技术淫的热捧。
    
    那么问题来了，react 的数据绑定技术是基于什么？有哪位技术淫可以告知一下吗？

共同进步

本喵第一次正式在思否平台发表文章，欢迎~欢迎~，希望能够与大家一起共同进步。
本喵专注于前端技术，不定期更新优质前端文章。
喜欢本喵，请点击下面“关注作者”，亲们还可以关注公众号“技术汤姆喵”哦~