vue2中通过Object.defineproperty(obj,key,handle)将代码中的data的属性进行getter与setter的响应式转化，这样数据的获取与数据的改变就是通过object.defineproperty的get set拦截实现的，这个过程是observer实现的
1、observer的作用：
在state.js的initData（）函数中，使用的是observer()方法来为数据绑定一个observer对象，observer对象执行defineReactive()方法为数据对象设置setter和getter，
function defineReactive(obj,key,val){
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get:()=>{
console.log('数据被获取时，触发')
return val;
},
set:(newVal)=>{
if(val == newVal){
return
}
val = newVal;
console.log("数据被改变时，触发");
}
})
}
let data = {
test:'初始值'
}
//对data上的test属性进行绑定
consoel.log(data.test)//数据获取时
data.test = '11'//数据被改变
2、Dep依赖关系
每一个组件都有一个watcher，每一个属性都存在一个watcher，每个属性都给分配一个dep，dep中需要存放这个watcher，watcher中还要放着这个dep
watcher 和dep是双向存储的关系：
我们将更新的功能封装了一个watcher
渲染页面前，会将当前的watcher 放到dep类中
在vue中页面渲染时使用的属性，需要进行依赖收集，收集对象的渲染watcher
取值时，给每个属性都加了dep属性，用于存储这个渲染watcher,(同一个watcher会对应多个dep)
每个属性可能对应多个视图（多个视图肯定是多个watcher） 一个属性要对应多个watcher
dep.depend()=> 通知dep存放watcher => dep.target.addDep()=>通知watcher存放dep
function defineReactive(obj,key,val){
var dep = new Dep();
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get:()=>{
//数据获取，将依赖收集
dep.addSub(watcher);
return val;
}
set(newVal)=>{
if(val == newVal){
return
}
val = newVal;
//数据改变，通知收集的依赖去执行更新
dep.notify();//给订阅者发消息，执行更新操作
}
})
}
function Dep(){
this.subs = [];
}
Dep.prototype = {
addSub:functin(sub){
this.subs.push(sub)
},
notify:function(){
this.subs.forEach(item=>{
item.update()
})
}
}
3、Watcher的作用
Watcher就是被收集的依赖，上栗中msg对应了三个watcher的实例依赖，当msg变化，会通知这三个watcher，这三个watcher会执行各自的操作，watcher能够控制自己属于data属性中，还是watch数据监听中的，或者computed中的，因此，Watcher中要有两个方法，一个通知变化，执行更新操作，另一个就是将自身实例添加到Dep的依赖收集中。
let id = 0;
class Watcher {
constructor(vm, exporOrFn, cb, options) {
this.vm = vm;
this.exporOrFn = exporOrFn;
this.options = options;
this.cb = cb;
this.id = id++;
this.deps = [];
this.depsId = new Set();
//默认应该让exportOrFn执行，exportOrFn做了什么事？去render上取值
this.getter = exporOrFn;
this.get(); //默认初始化要取值
}
get() {
//稍后用户更新时，可以重新调用getter方法
//defineProperty.get,每个属性都可以收集自己的watcher,每个属性都有一个依赖收集的对象 dep
//一个属性可以对应多个watcher，一个watcher也可以对应多个属性
pushTarget(this);
this.getter();
popTarget(this);
}
run(){
console.log('----run');
this.get()
}
update(){
// this.get()
//当数据被改变，对应的执行渲染等更新操作
//每次更新时 this 多次调用update 我希望现将watcher缓存下来，等一会一起更新
queueWatcher(this);
}
addDep(dep) {
//将watcher实例添加到data的属性中
//可能模板中多次取相同的属性值，但是每个属性值只需要一个watcher就可以，需要需要进行去重操作
let id = dep.id;
if (!this.depsId.has(id)) {
this.depsId.add(id);
this.deps.push(dep);
dep.addSub(this);
}
}
}
//异步更新原理
let callbacks = [];
let waiting = false
function flushCallbacks(){
callbacks.forEach(cb=>cb());
waiting = false
}
function timer(flushCallbacks) {
let timerFn = () => {};
if (Promise) {
timerFn = ()=>{Promise.resolve().then(flushCallbacks)};
} else if (MutationObserver) {
//可以监听dom的变化
let textNode = document.createTextNode(1);
let observe = new MutationObserver(flushCallbacks);
observe.observe(textNode, {
characterData: true,
});
timerFn = () => {
textNode = 3;
};
//微任务
} else if (setImmediate) {
timerFn = () => {
setImmediate(flushCallbacks);
};
} else {
timerFn = () => {
setTimeout(flushCallbacks, 0);
};
}
timerFn();
}
export function nextTick(callback){
callbacks.push(callback);
if(!waiting){
timer(flushCallbacks);//vue2中考虑了兼容性问题，vue3中没有考虑
waiting = true;
}
}
总结
Vue响应式原理的核心就是Observer、Dep、Watcher。
每一个被观察的属性上都存在ob。
如果是数据是数组，会劫持数组的方法，并对数组中不是基本数据类型的进行检测。
如果数据是对象，会将对象不停的递归，进行劫持，性能差，所以在日常开发中，尽量扁平化。
Observer中进行响应式的绑定，在数据被读的时候，触发get方法，执行Dep来收集依赖，也就是收集Watcher。
在数据被改的时候，触发set方法，通过对应的所有依赖(Watcher)，去执行更新。比如watch和computed就执行开发者自定义的回调方法。
