Vue雙向繫結原理（我盡量寫的。簡潔）

先問自己兩個問題： 
使用object.defineproperty ->監聽物件屬性的改變
2.當資料發生改變後，vue是如何知道 通知哪些 '人'，介面發生重新整理呢  (張三，李四，王五
發布訂閱者模式
''>} 
//張三 
} //
李四    } //
王五  這裡假設他們分別對應這三個message
}vue(
})

第一步肯定是建立vue例項。注意這裡的data是 !物件

可以理解為我們把這個obj物件傳入vue，vue內部拿到的就是乙個obj物件（data物件）

const obj =

拿到這個物件後，vue先用object.keys(obj)拿到乙個包含obj物件的所有屬性（message，name）的陣列，然後進行foreach遍歷，拿到每乙個屬性對應的value值

object.keys(obj).foreach(key =>,
8get
()16
})就會觸發set方法,列印出:
'監聽message改變' 
'老詹'

當我們設定或者訪問物件的屬性的時候，都會觸發相應的函式，然後在這個函式裡進行列印/返回/或者設定屬性的值

set
(newvalue),

那麼監聽到值改變後，告訴誰？誰在用呢？（記不記得一開始的張三，李四，王五。讓我們進行『擬人』，更好理解）

誰在用其實是解析html**，獲取到哪些人有用到我們的屬性

} //張三

} //李四

} //王五

哎！！獲取！獲取！那麼它肯定會呼叫一次message的get，那我就知道是張三，李四，王五你們在用這個message屬性

那麼到時候！一旦message屬性的值發生變化set，那我再去通知你們三個。

---即發布者訂閱者模式

class dep      
}const dep = new dep()  //這個dep物件就可以用subs這個陣列去記錄所有的訂閱者   （就是剛剛的張三，李四，王五啊）

那我怎麼知道所有的訂閱者在**呢 ,定義乙個addsub方法，之後往裡面傳入sub形參，代表即將要傳入進來的訂閱者

class dep 
addsub()
}

為了拿到訂閱者，我們得再建立乙個類  class watcher

class dep 
addsub()
}    
//監聽觀察
class watcher
update()
}到時候我們建立乙個watcher 例項，就可以例項化出來張三 w1物件  李四w2  物件,  ！！就可以把這些w1,w2例項物件放進dep例項的addsub內

addsub(watcher)

之後，誰用message屬性了，我們就趕緊建立乙個w1shiliduix

const w1 = new watcher('張三') //意味著張三使用了一次

就把w1傳進 dep.addsub(w1)

const obj =
object.keys(obj).foreach(key =>,
get()
})})
//發布訂閱者模式   dependency  subscribe訂閱
class dep 
addsub(watcher)
再定義乙個notify方法
notify())} }
//監聽觀察
class watcher
update()
}const dep = new
dep()
const w1 = new watcher('張三')
dep.addsub(w1)
const w2 = new watcher('李四')
dep.addsub(w2)
const w3 = new watcher('王五')
dep.addsub(w3)

最終**一覽

//張三
} //
李四    }    //王五}
vue(
})

view code

watcher 訂閱者：收到屬性的變化，然後更新檢視（這個過程中我們可能會有很多個訂閱者 watcher 所以我們要建立乙個容器 dep 去做乙個統一的管理）

compile 解析器：解析指令，初始化模版，繫結訂閱者

*object.keys(obj)

引數：要返回其列舉自身屬性的物件

返回值：乙個表示給定物件的所有可列舉屬性的字串陣列

vue雙向繫結原理

大家知道vue的雙向繫結原理是利用object.defineproperty 這一方法，以下是我研究該方法的一些內容語法 object.defineproperty obj,prop,descriptor descriptor是將被定義或修改的屬性描述符，而雙向繫結是利用get和set屬性描述符。...

Vue雙向繫結原理

vue實現資料雙向繫結的原理就是用object.defineproperty 重新定義 set方法物件設定屬性值和 get方法獲取屬性值的操縱來實現的 object.property 方法的解釋 object.property 引數1，引數2，引數3 返回值為該物件obj 其中引數1為該物件 o...

vue雙向繫結原理

vue資料雙向繫結是通過資料劫持結合發布者訂閱者模式來實現的。首先要對資料進行劫持監聽，所以需要設定乙個 observer，用來監聽所有的屬性。如果屬性發生了變化，就要告訴訂閱者watcher看是否需要更新，因為訂閱者很多，所以我們需要有乙個訊息訂閱器容器dep專門收集訂閱者，然後在 observ...

Vue雙向繫結原理（我盡量寫的。簡潔）

vue雙向繫結原理

Vue雙向繫結原理

vue雙向繫結原理

相關推薦