vue2中通過Object.defineproperty(obj,key,handle)將代碼中的data的屬性進行g(shù)etter與setter的響應式轉(zhuǎn)化，這樣數(shù)據(jù)的獲取與數(shù)據(jù)的改變就是通過object.defineproperty的get set攔截實現(xiàn)的，這個過程是observer實現(xiàn)的

1、observer的作用：

在state.js的initData（）函數(shù)中，使用的是observer()方法來為數(shù)據(jù)綁定一個observer對象，observer對象執(zhí)行defineReactive()方法為數(shù)據(jù)對象設置setter和getter，

function defineReactive(obj,key,val){
    Object.defineProperty(obj,key,{
        enumerable:true,
        configurable:true,
        get:()=>{
            console.log('數(shù)據(jù)被獲取時，觸發(fā)')
            return val;
        },
        set:(newVal)=>{
            if(val == newVal){
                return 
            }
            val = newVal;
            console.log("數(shù)據(jù)被改變時，觸發(fā)");
        }
    })
}
let data = {
    test:'初始值'
}
//對data上的test屬性進行綁定
consoel.log(data.test)//數(shù)據(jù)獲取時
data.test = '11'//數(shù)據(jù)被改變

2、Dep依賴關(guān)系

每一個組件都有一個watcher，每一個屬性都存在一個watcher，每個屬性都給分配一個dep，dep中需要存放這個watcher，watcher中還要放著這個dep

watcher 和dep是雙向存儲的關(guān)系：

我們將更新的功能封裝了一個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:()=>{
            //數(shù)據(jù)獲取，將依賴收集
           dep.addSub(watcher);
            return val;
        }
        set(newVal)=>{
            if(val == newVal){
                return 
            }
            val = newVal;
            //數(shù)據(jù)改變，通知收集的依賴去執(zhí)行更新
            dep.notify();//給訂閱者發(fā)消息，執(zhí)行更新操作
        }
    })
}
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會執(zhí)行各自的操作，watcher能夠控制自己屬于data屬性中，還是watch數(shù)據(jù)監(jiān)聽中的，或者computed中的，因此，Watcher中要有兩個方法，一個通知變化，執(zhí)行更新操作，另一個就是將自身實例添加到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執(zhí)行，exportOrFn做了什么事？去render上取值
 this.getter = exporOrFn;
 this.get(); //默認初始化要取值
}
get() {
 //稍后用戶更新時，可以重新調(diào)用getter方法
 //defineProperty.get,每個屬性都可以收集自己的watcher,每個屬性都有一個依賴收集的對象 dep
 //一個屬性可以對應多個watcher，一個watcher也可以對應多個屬性
 pushTarget(this);
 this.getter();
 popTarget(this);
}
run(){
 console.log('----run');
 this.get()
}
update(){
   // this.get()
   //當數(shù)據(jù)被改變，對應的執(zhí)行渲染等更新操作
   //每次更新時 this 多次調(diào)用update 我希望現(xiàn)將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) {
 //可以監(jiān)聽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;
 }
}

總結(jié)

• Vue響應式原理的核心就是Observer、Dep、Watcher。

• 每一個被觀察的屬性上都存在ob。

• 如果是數(shù)據(jù)是數(shù)組，會劫持數(shù)組的方法，并對數(shù)組中不是基本數(shù)據(jù)類型的進行檢測。

• 如果數(shù)據(jù)是對象，會將對象不停的遞歸，進行劫持，性能差，所以在日常開發(fā)中，盡量扁平化。

• Observer中進行響應式的綁定，在數(shù)據(jù)被讀的時候，觸發(fā)get方法，執(zhí)行Dep來收集依賴，也就是收集Watcher。

• 在數(shù)據(jù)被改的時候，觸發(fā)set方法，通過對應的所有依賴(Watcher)，去執(zhí)行更新。比如watch和computed就執(zhí)行開發(fā)者自定義的回調(diào)方法。