對雙向數據綁定的理解

應該很多人面試都會被問到這個問題,現在趨勢面試已經趨向於底層原理的刨底了,因爲vue誰都會,你用vue做了一個項目,真的不能代表你對vue就很熟悉了,隨着vue3.0的出現,雙向數據綁定使用ES6的Proxy 作爲其觀察者機制,取代之前使用的Object.defineProperty。這篇文章我們先來說說怎麼利用Object.defineProperty()去實現雙向數據綁定的?

首先vue通過Object.defineProperty這個方法重新定義了對象獲取屬性值(get)和設置屬性值(set)的操作來實現的,通過數據劫持,把data對象裏面的每個數據讀寫化成getter&setter,在數據讀和寫的時候,通過發佈訂閱者模式,利用Dep閱讀器依賴收集,當數據有變化的時候觸發watch更新視圖(watch初始化的時候要添加進Dep閱讀器,通過觸發Get()數據更新就可以觸發watch監聽數據變化)

以上均爲個人理解,如有不對的地方請指正

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章