1、响应式和数据双向绑定的基本概念
1.1 什么是响应式？
响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。
1.2 什么是数据双向绑定?
是指视图 View 的变化能实时地让数据模型 Model 发生变化，而数据的变化也能实时更新到视图层。既就是view的变化能反映到ViewModel上，ViewModel的变化能同步到view上
说了基本概念，我们就直接去探索其行为：直观上，数据再变化时不需要开发者去手动更新视图，视图会根据变化的数据 “自动” 进行更新。想要完成这个过程，需要做到已下几点。
- 要知道去收集视图依赖了哪些数据 。
- 感知被依赖数据的变化。
- 数据变化时，自动 “通知”需要更新的视图部分，并进行更新。
这个过程对应的技术概念如下
- 依赖收集
- 数据劫持/数据代理
- 发布/订阅模式
2、数据劫持/数据代理
感知数据变化的方法很直接，就是进行数据劫持或数据代理。可以通过Object.defineProperty这个方法来实现。
先来简单看下Object.defineProperty(obj,property,descriptor)这个方法。
参数一：
obj绑定属性的目标对象
参数二：property绑定的属性名
参数三：descriptor属性描述（配置），且此参数本身为一个对象
descriptor对象参数说明如下
- 属性值1：
value设置属性默认值- 属性值2：
writable设置属性是否能够修改- 属性值3：
enumerable设置属性是否可以枚举，即是否允许遍历- 属性值4：
configurable设置属性是否可以删除或编辑- 属性值5：
get获取属性的值- 属性值6：
set设置属性的值
let data = {
name: 'fzs',
info: {
age: 18,
driving: 2,
familyTies: {
maritalStatus: '已婚'
}
}
}
Object.keys(data).forEach(key => {
let currentValue = data[key]
Object.defineProperty(data, key, {
enumerable: true, //
configurable: false, // 声明了之后后面不能再手动改配置
get() {
console.log('你读取值得时候会触发我哦')
return currentValue
},
set(newValue) {
console.log('赋值操作会触发我，这是新赋值：' + newValue)
currentValue = newValue
}
})
})
setTimeout(() => {
console.log(data.name)
data.name='hhh'
data.info.age=30
console.log(data);
}, 500)
我们在setTimeout中触发了两次赋值两次读取值。但是为什么set才触发了一次，原因是我们的代码只是实现了一层Object.defineProperty对于嵌套引用类型数据结构 data.info我们也应该进行拦截。我们可以使用递归来实现，稍微改造一下
let data = {
name: 'fzs',
info: {
age: 18,
driving: 2,
familyTies: {
maritalStatus: '已婚'
}
}
}
const observe = data => {
// 跳过空值跟基础类型数据
if (!data || typeof data !== 'object') {
return
}
Object.keys(data).forEach(key => {
let currentValue = data[key]
observe(currentValue)
Object.defineProperty(data, key, {
enumerable: true, //
configurable: false, // 声明了之后后面不能再手动改配置
get() {
console.log('你读取值得时候会触发我哦')
return currentValue
},
set(newValue) {
console.log('赋值操作会触发我，这是新赋值：' + newValue)
currentValue = newValue
// set的时候也递归一下，这样才能实现对复杂数据的观察
observe(currentValue)
}
})
})
}
observe(data)
setTimeout(() => {
console.log(data.name)
data.name = 'hhh'
data.info.age = 30
console.log(data)
}, 500)
}
使用了递归函数observe去实现，所以此时给第二层赋值的时候也触发了拦截
以上两段代码就简单实现了对数据的拦截，这就是很多框架实现的第一步。如果你了解java在面向对象中，创建类的时候，一般都会定义属性的get跟set，这样是为了方便数据拦截处理等。
2.1、监听数组变化
如果我们将上述数据中的某一项变为数组，如下所示：
let data = {
name: 'fzs',
info: {
age: 18,
driving: 2,
familyTies: {
maritalStatus: '已婚'
},
hobby:['play Games','Movies']
}
}
const observe = data => {
// 跳过空值跟基础类型数据
if (!data || typeof data !== 'object') {
return
}
Object.keys(data).forEach(key => {
let currentValue = data[key]
observe(currentValue)
Object.defineProperty(data, key, {
enumerable: true, //
configurable: false, // 声明了之后后面不能再手动改配置
get() {
console.log('你读取值得时候会触发我哦')
return currentValue
},
set(newValue) {
console.log('赋值操作会触发我，这是新赋值：' + newValue)
currentValue = newValue
// set的时候也递归一下，这样才能实现对复杂数据的观察
observe(currentValue)
}
})
})
}
observe(data)
setTimeout(() => {
data.info.hobby.push('badminton')
}, 500)
}
如上代码调用数组中的操作函数，如push等是无法监控到的，只输出了两次getter的原因是因为Array.prototype上挂载的方法并不能触发属性值得setter。这并不属于做赋值操作，只是调用数组中的push方法。而输出了两次getter里面的内容，是因为读取了data里面的info跟data.info.hobby这两层属性。data.info.hobby.push('badminton')这段代码就是读取对象的值再进行push，所以会触发getter.
对于框架来说，不能感知数组变化，这显然不合理。在vue2中同样也是有这个问题。它的解决方法就是将数组的常用方法进行重写。进而覆盖原生数组的方法。重写之后的数组方法需要能够被拦截。
实现逻辑如下：
const arrExtend = Object.create(Array.prototype)
const arrMethods = ['push','pop','shift','unshift','splice','sort','reverse']
arrMethods.forEach(method=>{
const oldMethod = Array.prototype[method]
const newMethod = function (...args){
oldMethod.apply(this,args)
console.log(`我重写了数组的${method}方法`);
}
arrExtend[method] = newMethod
})
// 覆盖原生方法
Array.prototype = Object.assign(Array.prototype,arrExtend)
let arr = [1,2,3]
arr.push(4)
这种做法，我查了一下术语叫做 叫做 monkey patch (猴子补丁)。其实本质上就是重写原生的方法，这样做不是很安全，也不优雅。那么还有更好的实现方式吗？
有的。可以使用ES Next的新特性-----Proxy 。下一章我们再详细讲一下
