Vue 源码学习之 Object.defineProperty 对象属性监听
在 Vue 中，Object.defineProperty 对象属性监听是实现双向数据绑定的关键所在。通过使用 Object.defineProperty 方法，可以对对象的属性进行监听，从而实现数据的双向绑定。
Object.defineProperty 方法的基本使用
-------------------------------------
Object.defineProperty 方法可以用来定义对象的属性，包括 getter、setter、enumerable、configurable 等。下面是一个简单的示例：
```javascript
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 被访问
```
在上面的示例中，我们使用 Object.defineProperty 方法来定义对象 a 的属性 b。其中，get 和 set 方法分别用于监听属性 b 的读取和赋值操作。
递归监听对象属性
-------------------
在实际应用中，我们可能会遇到对象中属性的值还是对象的情况。这时，我们需要使用递归的方式来监听对象的所有属性。下面是一个示例：
```javascript
function Observer(data){
this.data = data;
this.walk(data);
}
let p = Observer.prototype;
p.walk = function(obj){
let val;
for(let key in obj){
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 被访问
```
在上面的示例中，我们定义了一个 Observer 构造函数，用于监听对象的所有属性。其中，walk 方法用于递归遍历对象的所有属性，而 convert 方法用于使用 Object.defineProperty 方法来定义对象的属性。
Vue 源码中的实现
-------------------
在 Vue 的源码中，我们可以看到类似的实现。例如，在 src/observe/observer.js 文件中，有以下代码：
```javascript
function Observer(data){
this.data = data;
this.walk(data);
}
// ...
```
这些代码用于监听对象的所有属性，并实现数据的双向绑定。
总结
----
本文主要介绍了 Vue 源码学习之 Object.defineProperty 对象属性监听。通过使用 Object.defineProperty 方法，可以对对象的属性进行监听，从而实现数据的双向绑定。同时，我们也可以使用递归的方式来监听对象的所有属性。这些技术在 Vue 的源码中得到了广泛的应用。
