Object.defineProperty与双向绑定、数据监听

一、对象赋值的两种方式

一是“=”赋值，一是Object.defineProperty方法，而当下流行框架中广泛应用的双向绑定和数据监听等，就是利用的第二种方式，关于此方法不多讲，可参考

developer.mozilla.org/zh-CN/docs/…

需要注意一点的是，

var bValue; Object.defineProperty(o, "b", {get : function(){return bValue;},set : function(newValue){bValue = newValue;},enumerable : true,configurable : true });o.b = 38;复制代码

虽然其中set方法是这样写的，

set : function(newValue){bValue = newValue;},复制代码

所以此处的a.b=arg不同于一般的. 语法，而是已经触发了setter了

二、为什么Object.defineProperty能实现双向绑定和数据监听呢

因为Object.defineProperty方法里有getter和setter函数对，你可以把它理解为一个可以触发的函数，触发事件就是setter对应的属性被改变

eg：

var bValue = 38; Object.defineProperty(o, 'b', {get: function() { return bValue; },set: function(newValue) { bValue = newValue; you can do something, like update the new data to virual dom! },enumerable: true,configurable: true }); o.b; // 38 //属性”b”被设置到对象o上，并且值为38。 //现在o.b的值指向bValue变量，除非o.b被重新定义 复制代码

三、框架里的具体做法是怎样的呢？

一句话描述，就是把在data里注册的所有属性都添加上对应的getter和setter函数对。

形象点，可以参照下面的方法：使用defineProperty方法封装一个监听属性变动的函数。

var object = {name:'liwudi',age:34 } function changeIt(object) {function descripterFun(value) {return {enumerable: true,get: function () {console.log('get it');return value;},set: function (newvalue) {console.log('set it');value = newvalue;}}}for(var i in object){Object.defineProperty(object, i, descripterFun(object[i]))} } changeIt(object); console.log(object.name); object.name = '我是中国人'; console.log(object); 复制代码

当然，真正要解决的问题远比上述复杂，比如更深层次的属性要利用到递归方法等等。

参考资料：

blog.csdn.net/yuhk231/art…

blog.csdn.net/mapbar_fron…

转载于:https://juejin.im/post/5be3a9def265da61171c3773

总结

以上是生活随笔为你收集整理的Object.defineProperty与双向绑定、数据监听的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。