/*  自己寫的代碼, 實現vue的雙向綁定和依賴收集  場景: 多個子組件用到父組件data中的數據, 當父組件data中的此數據發生改變時,   所有依賴它的 子組件全部更新  通常子組件的從父組件中拿取的數據不允許發生改變*/  //訂閱者 Dep  //一個訂閱者只管理一個數據  class Dep {    constructor () {      this.subs = []  //存放vue組件    }    addSubs (sub) {      this.subs.push(sub)      console.log('add watcher: ', sub._name)    }    notify () {      this.subs.forEach( sub => {  //通知vue組件更新        sub.update()      })    }  }  //監聽者  //一個vue實例包含一個Watcher實例  class Watcher {    // 在實例化Watcher時, 將Dep的target指向此實例, 在依賴收集中使用    // 因為依賴收集是在組件初始化時觸發的, 而數據變更后視圖相應變更是在初始化后    // 所以讓Dep.target指向此實例, 當此vue實例初始化完成后, 再指向下一個正在初始化的vue實例完成依賴收集    constructor (name) {      Dep.target = this      this._name = name    }    update () {      // 這里模擬視圖更新      // 其實還應該讓子組件的props相應值與父組件更新的數據同步      console.log("子組件視圖更新了..." + this._name)    }  }  //對data中的數據設置讀寫監聽, 并且創建訂閱者, 用于收集子組件的依賴和發布  function defineReactive (obj, key, value) {    // 對vue實例中data對象的每一個屬性都 設置一個訂閱者Dep    let dep = new Dep()    // 第二個vue實例的監聽 覆蓋了第一個vue實例的監聽, 因為引用的obj是同一個    Object.defineProperty(obj, key, {      configurable: true,      enumerable: true,      get () {        // 在讀此屬性時, 將當前 watcher 對象收集到此屬性的 dep 對象中      // 在實例化vue時將Dep.target指向當前Watcher      // get()依賴收集的時候是vue組件初始化的時候, set()是在初始化后        if (dep.subs.indexOf(Dep.target) === -1) {          dep.addSubs(Dep.target)        }        //return obj[key]   此寫法報錯 提示棧溢出 原因是無限調用get()        return value      },      set (newVal) {  // 此屬性改變時, 通知所有視圖更新        if (newVal !== value) {          value = newVal          dep.notify()          }      }    })  }  //接收一個對象作為參數, 將該對象的所有屬性調用defineReactive設置讀寫監聽  function observer (obj) {    if (!obj || (typeof obj !== 'object')) {      return     }    Object.keys(obj).forEach( key => {      defineReactive(obj, key, obj[key])    })   }  // 構造函數, 監聽 配置options中的data()方法返回的對象的所有屬性 的讀寫  class Vue {    constructor (options) {      this._name = options.name      this._data = options.data      // 每個vue組件都是一個vue實例, 在一個頁面中有多個vue實例      // 在初始化該vue實例時, new一個Watcher對象, 使Dep.target指向此實例      new Watcher(options.name)      // 給data中的數據掛載讀寫監聽      observer(this._data)      //模擬vue解析template過程, 獲取從父組件傳遞過來的props      //在這里進行依賴收集      this._props = options.props ? getProps() : {}      // 實例化該組件的子組件      this._children = options.render ? (options.render() || {}) : {}    }  }  // 父組件數據  let data = {    first: "hello",    second: 'world',    third: ['啦啦啦']  }  let times = 0  // 第一次調用返回的是第一個子組件的從父組件繼承的數據(vue中props屬性的值)  // 第二次調用返回的是第二個子組件的從父組件繼承的數據(vue中props屬性的值)  function getProps () {    times++    if (times == 1) {      let obj = {first: "", second: ""}      Object.keys(obj).forEach( key => {        // 如果是對象, 則進行深拷貝        // 這里使用到了父組件的數據, 觸發依賴收集        if (data[key] instanceof Object) {          obj[key] = JSON.parse(JSON.stringify(data[key]))        } else {          obj[key] = data[key]        }       })      return obj    } else if (times == 2) {      let obj = {first: "", third: ""}      Object.keys(obj).forEach( key => {        if (data[key] instanceof Object) {          obj[key] = JSON.parse(JSON.stringify(data[key]))        } else {          obj[key] = data[key]        }       })      return obj    }    }   let vue_root = new Vue({     name: 'vue_root',     data,     //模擬編譯template和實例化vue的過程      //在編譯父組件 并且傳遞參數給子組件時, 將子組件的 watcher 添加進父組件的 dep     render () {       let vue_1 = new Vue({         name: 'vue_1',         data: {},         props: true,         render () {}       })        let vue_2 = new Vue({         name: 'vue_2',         data: {},         props: true,         render () {}       })        return {         vue_1,         vue_2       }     }   })  console.log(vue_root)   vue_root._data.first = 'hello hello'  // vue_1 和 Vue_2 都依賴此數據, 都更新   vue_root._data.third = "aaa"      // 只有 vue_2 依賴到了此數據, 更新