Vue是MVVM模式
要实现一个响应式系统，需要做到：
- 数据劫持：当数据变化时，我们可以做一些特定的事情
- 依赖收集：我们要知道那些视图层的内容(DOM)依赖了哪些数据(state)
- 派发更新：数据变化后，如何通知依赖这些数据的DOM 接下来，我们将一步步地实现一个自己的玩具响应式系统
一、数据劫持
1. 数据劫持是什么？
使用自定义的getter和setter来重写了原有的行为，这也就是数据劫持的含义。
2. 数据劫持使用了Object.defineProperties()方法
- Object.defineProperties()方法会直接在一个对象上定义一个新属性，或者修改对象上的一个现有属性，并返回此对象。
- 可以返回一些额外隐藏的东西，比如是否可读
writable: true,、是否可被枚举enumerable: false等等
3. defineReactive函数
创建一个可以使用外部变量的闭包函数，包含了Object.defineProperties的核心功能。为什么？因为Object.defineProperties方法需要定义一个变量交换才能成功赋值！我们需要一个全局的变量来保存这个属性的值！
function defineReactive(data, key, val) {
Object.defineProperty(data, key, {
// 可被枚举
enumerable: false,
// 一些可配置的属性
configurable: true,
// getter
get() {
return val
},
// setter 数据劫持
set(newVal) {
if(val === newVal) return
val = newVal
}
})
}
// 外部调用
defineReactive(obj,'a', 22)
defineReactive(obj,'b', 33)
4. 递归侦测对象上的全部属性
- obj有多个属性呢？我们可以新建一个类Observer来遍历该对象。
-
observe、new Observer、defineReactive这三个函数相互调用从而形成了递归，与普通的递归有所不同。
侦测的整个流程图
二、依赖收集
数据变化时，只更新与这个数据有关的DOM结构，那就涉及到下文的内容了：依赖。在
getter中收集依赖，在setter中触发依赖。
总结一下我们需要实现的功能：
- 有一个数组来存储watcher
- watcher实例需要订阅(依赖)数据，也就是获取依赖或者收集依赖
- watcher的依赖发生变化时触发watcher的回调函数，也就是派发更新。
三、派发更新
实现依赖收集后，我们最后要实现的功能是派发更新，也就是依赖变化时触发watcher的回调。
在setter中派发更新。dep.forEach(d => d.update()) // 新增 update方法见Watcher类
一些注意的地方
- vue中直接改写数组下标的时候是不会触发数据响应的，如
arr[0]='666'，因为不属于七种方法之一，可以使用vue.$set()形式 - vue当中数组的响应侦测是如何实现的？以arrayPrototype为原型，创建了arrayMethords的对象,使用了Object.setPrototypeOf()改写了七个数组的方法
- 使用了闭包：在defineReactive中就形成了闭包，每个属性都有自己的值value和依赖对象dep。
- 只要触发getter就会收集依赖吗？答案是否定的。在Dep的depend方法中，我们看到，只有Dep.target为真时才会添加依赖。
总结一下：
- 调用observe(obj)，将obj设置为响应式对象，observe函数，Observe, defineReactive函数三者互相调用，从而递归地将obj设置为响应式对象
- 渲染页面时实例化watcher，这个过程会读取依赖数据的值，从而完成在getter中获取依赖
- 依赖变化时触发setter，从而派发更新，执行回调，完成在setter中派发更新
处理数组？
通过设置代理原型，让数组执行变异方法来完成响应式，并且为每个属性设置了ob属性，这样，我们在闭包之外就能访问dep了，从而完成派发更新，包括Vue.set方法也利用了这个属性。
$set(target, key, value) {
// 对于数组利用splice实现添加元素
if (Array.isArray(target)) {
// 如果splice索引超过数组长度会报错
target.length = Math.max(target.length, key)
target.splice(key, 1, value)
return value
}
// 对于对象，如果该属性已经存在，直接赋值
if (key in target && !(key in Object.prototype)) {
target[key] = value
return value
}
const ob = target.__ob__
// 如果目标对象不是响应式对象，直接赋值
if (!ob) {
target[key] = value
return value
}
// 设置响应式属性
defineReactive(target, key, value)
// 派发更新
ob.dep.notify()
return value
}
