>[success] # 簡單的響應式模型（二） * 有這么一個 Vue 對象。修改了`data`中`text3`的數據，但是因為視圖中并不需要用到`text3`，因此其實`text3`并不需要做響應劫持，上個章節時候我們是同一將所有數據都做了劫持，這是需要優化點之一 ~~~ new Vue({ template: `<div> <span>{{text1}}</span> <span>{{text2}}</span> <div>`, data: { text1: 'text1', text2: 'text2', text3: 'text3' } }); // 修改數據 this.text3 = 'modify text3'; ~~~ * 也會遇到一個數據對應多個視圖情況 ~~~ let globalObj = { text1: 'text1' }; let o1 = new Vue({ template: `<div> <span>{{text1}}</span> <div>`, data: globalObj }); let o2 = new Vue({ template: `<div> <span>{{text1}}</span> <div>`, data: globalObj }); // 執行 globalObj.text1 = 'hello,text1'; ~~~ >[danger] ##### 簡單的構想  1. 創建Vue 對象時候 開始調用 `observer `給每個對象屬性分配`getter `和` setter`,此時只是會先注冊需要具有響應依賴的 發布者對象 ，并給每個屬性 分配并不會觸發getter 和setter中的觀察者模,getter 和setter 只有觸發時候才會調用現在只是聲明 2. 在創建 我們要做的觀察者對象`new Watcher()`，這里很巧妙 因為我們是先注冊 `observer` 后注冊 觀察者對象，你此時并不能將觀察者對象倒序傳入`observer`。但在`Watcher `時候我們其實創建一個屬于發布者的靜態屬性，該屬性指向了我們訂閱者 3. 此時開始渲染視圖，只有視圖中使用的屬性才會進行 發布訂閱的劫持，此時是第一次觸發`getter `，將觀察者注入到發布者,當我們進行`setter `賦值的時候 會觸發發布者 統一廣播調用觀察者的視圖更新 * 注實際上一個 `Watcher` 對象可能會在多個 `Dep` 中，并不是每次 **addSub 都是一個新的 Watcher 對象**，需依賴 `Dep.target` 進行收集（**實際上 Dep.target 也是通過 Watcher 對象的 get 方法調用 pushTarget 將自身賦值給 Dep.target**）。 ~~~ // 發布者 class Dep { constructor() { this.subs = [] } // 收集 addSubs(sub) { this.subs.push(sub) } // 觸發 notify() { this.subs.forEach((sub) => { sub.update() }) } } // 觀察者 關于Dep.target = this // this 指向的就是 new watcher 生成的watcher實例 // 這樣全局任何地方都可調用 class Watcher { constructor() { Dep.target = this // this 指向的就是 new watcher 生成的watcher實例 } /* 更新視圖的方法 */ update() { console.log('視圖更新啦～') } } class Vue { constructor(opt) { this._data = opt.data observer(this._data) /* 新建一個Watcher觀察者對象，這時候Dep.target會指向這個Watcher對象 */ new Watcher() /* 在這里模擬render的過程，為了觸發test屬性的get函數 */ console.log('render~', this._data.test) } } function defineReactive(obj, key, val) { /* 一個Dep類對象 */ const dep = new Dep() Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { /* 將Dep.target（即當前的Watcher對象存入dep的subs中） */ dep.addSub(Dep.target) return val }, set: function reactiveSetter(newVal) { if (newVal === val) return /* 在set的時候觸發dep的notify來通知所有的Watcher對象更新視圖 */ dep.notify() }, }) } ~~~ >[danger] ##### 參考 [剖析 Vue.js 內部運行機制](https://juejin.cn/book/6844733705089449991)