首先,vuejs在實例化的過程中,會對實例化對象選項中的data
選項進行遍歷,遍歷其所有屬性並使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。同時每壹個實例對象都有壹個watcher實例對象,他會在模板編譯的過程中,用getter去訪問data的屬性,watcher此時就會把用到的data屬性記為依賴,這樣就建立了視圖與數據之間的聯系。當之後我們渲染視圖的數據依賴發生改變(即數據的setter被調用)的時候,watcher會對比前後兩個的數值是否發生變化,然後確定是否通知視圖進行重新渲染這樣就實現了所謂的數據對於視圖的驅動。通俗地講,它意味著我們在普通
HTML 模板中使用特殊的語法將 DOM “綁定”到底層數據。壹旦創建了綁定,DOM 將與數據保持同步。每當修改了數據,DOM 便相應地更新。這樣我們應用中的邏輯就幾乎都是直接修改數據了,不必與 DOM 更新攪在壹起。這讓我們的代碼更容易撰寫、理解與維護。
Vue.js的數據驅動就是通過MVVM這種框架來實現的。MVVM框架主要包含3個部分:model、view和 viewmodel。
Model:指的是數據部分,對應到前端相當於javascript對象
View:指的是視圖部分,對應前端相當於dom
Viewmodel:就是連接視圖與數據的中間件通訊
數據(Model)和視圖(View)是不能直接通訊的,而是需要通過ViewModel來實現雙方的通訊。當數據變化的時候,viewModel能夠監聽到這種變化,並及時的通知view做出修改。同樣的,當頁面有事件觸發時,viewMOdel也能夠監聽到事件,並通知model進行響應。Viewmodel就相當於壹個觀察者,監控著雙方的動作,並及時通知對方進行相應的操作。