簡析vue的雙向綁定原理

答：

Vue內部經過Object.defineProperty方法屬性攔截的方式，把data對象裏每一個數據的讀寫轉化成getter/setter，當數據變化時通知視圖更新。

具體說一下Object.defineProperty：

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。

Object.defineProperty(obj, prop, descriptor)

obj:要在其上定義屬性的對象。
prop:要定義或修改的屬性的名稱。
descriptor:將被定義或修改的屬性描述符。
複製代碼

進一步:

Object.defineProperty()具體實現：

let hr={
    skill:'',
    experience:''
}

Object.defineProperty(hr, 'skill', {
    get(){
        console.log('必備技能：')
        return '畫大餅'
    },
    set(newVal){
        console.log('加分項：')
    }
})

//讀：
console.log(hr.skill)
//寫：
hr.skill='吹牛皮'
複製代碼

控制檯打印

必備技能：
畫大餅
經驗要求：
"吹牛皮"
複製代碼

發佈訂閱模式

如今已經能夠檢測到數據的讀和寫，而後就須要通知視圖的更新了.

這裏是典型的發佈訂閱模式，在這個模式下：數據是發佈者（Observer），依賴對象是訂閱者（Watcher），他們須要一箇中間人來傳遞，那就是訂閱器（Dep）。

總結：實現數據的雙向綁定，首先要對數據進行劫持監聽，因此咱們須要設置一個監聽器Observer，用來監聽全部屬性。若是屬性發生變化了，就須要告訴訂閱者Watcher看是否須要更新。由於訂閱者Watcher是有不少個，因此咱們須要有一個消息訂閱器Dep來專門收集這些訂閱者，而後在監聽器Observer和訂閱者Watcher之間進行統一管理。

參考連接：

Object.defineProperty() -MDN

通俗易懂了解Vue雙向綁定原理及實現

推薦閱讀：

發佈者-訂閱者模式-Microsoft Azure

系列：

更多面試簡答