众所周知，vue2.0的双向数据绑定使用es6的Object.defineProperty方法实现的，本文我讲会为大家仔细讲解之间的实现原理。
- Object.defineProperty() 法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
这个方法接收三个参数，
Object.defineProperty(obj, prop, desc)
- obj 需要定义属性的当前对象.
- prop 当前需要定义的属性名.
- desc 属性描述符(configurable, enumerable, writable, set, get)
其实我们平时给对象添加属性例如
let obj = {};
obj.name = 'lisi';
用Object.defineProperty()的话就是
var o = {};
Object.defineProperty(o, 'name', {
enumerable: true,// 可被枚举， 就是for in 循环能得到key
configurable: true, // 能够被改变，能够被删除。
writable: true, // 可被赋值改变
value: "list"
})
在我们的vue中其实就是利用Object.defineProperty中的get和set方法，获取对象的值的时候会触发get方法，设置值的时候会触发set方法，从而去通知订阅的对象达到响应式。注意： 设置了get，set 就不能设置writable属性了否则会报错。
var o = {};
var value = ''；
Object.defineProperty(o, 'name', {
enumerable: true,
configurable: true,
// writable: true,
get() {
return value
},
set(newValue) {
value = newValue;
}
})
了解了上面Object.defineProperty()的基本用法，我们来模仿vue中对数据的劫持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var obj = {
name: 'yumang',
age: 18,
girls: ['美女']
};
function defineReactive(o, key, value){
if (typeof value === 'object' && value != null && !Array.isArray(value)) {
// 是非数组的引用类型
reactify(value); // 递归
}
Object.defineProperty(o, key ,{
configurable:true,
enumerable:true,
get(){
// get 的时候做额外操作
console.log('这里在获取'+ key + '的值')
return value
},
set(newValue){
// set 的时候做额外操作
console.log('这里在设置' + key + '的值'+ newValue)
value = newValue;
},
})
}
/**
* o 要被劫持的对象
* **/
function reactify (o){
let keys = Object.keys(o);
for (let i=0; i< keys.length; i++ ){
let key = keys[i];
let value = o[key];
/**
* 1. 数组监听
* 2. 对象和普通值的监听
* **/
if (Array.isArray(value)){
// 如果是数组 就要对数组里面的每一个属性进行监听
for(let j = 0; j< value.length; j ++) {
if (typeof value[j] === 'object') reactify(value[j]) // 递归
}
}else {
// 对象和普通值的监听, 进入defineReactive的时候 如果对象里面还有对象就需要使用递归
defineReactive(o, key, value)
}
}
}
reactify(obj)
</script>
</body>
</html>
以上两个函数的递归调用我们就完成了对象属性的监听， 然而对于数组， 它的一些方法push等，却没有监听到，vue里面是怎么处理的呢。 我们下次再一起学习。