vue源码学习:Object.defineProperty 对象属性监听

参考版本 vue源码版本:0.11
相关

vue实现双向数据绑定的关键是 Object.defineProperty ,让我们先来看下这个函数。

在MDN上查看有关 Object.defineProperty 的解释。

我们先从最简单的开始:

let a = {'b': 1}; Object.defineProperty(a, 'b', {     enumerable: false,     configurable: false,     get: function(){         console.log('b' + '被访问');     },     set: function(newVal){         console.log('b' + '被修改,新' + 'b' + '=' + newVal);     } });  a.b = 2;   // b被修改,新b=2 a.b;       // b被访问

这样,我们就能监听对象了!但问题并不仅仅这么简单。。。

我们可能会有对象中属性的值还是对象这种嵌套情况,可以通过递归解决!

在vue源代码文件 srcobserveobserver.js 中

// 观察者构造函数 function Observer(data){     this.data = data;     this.walk(data); }  let p = Observer.prototype;  p.walk = function(obj){     let val;     for(let key in obj){         // 通过 hasOwnProperty 过滤掉一个对象本身拥有的属性          if(obj.hasOwnProperty(key)){             val = obj[key];             // 递归调用 循环所有对象出来             if(typeof val === 'object'){                 new Observer(val);             }             this.convert(key, val);         }     } };  p.convert = function(key, val){     Object.defineProperty(this.data, key, {         enumerable: false,         configurable: false,         get: function(){             console.log(key + '被访问');         },         set: function(newVal){             console.log(key + '被修改,新' + key + '=' + newVal);             if(newVal === val) return ;             val = newVal;         }     }) };  let data = {     user: {         name: 'zhangsan',         age: 14     },     address: {         city: 'beijing'     } }  let app = new Observer(data);  data.user.name;    // user被访问 

脚本宝典为你提供优质服务
脚本宝典 » vue源码学习:Object.defineProperty 对象属性监听

发表评论

提供最优质的资源集合

立即查看 了解详情