Vue的核心就是所謂的“響應式系統”。這個系統可以自動偵測數據變化,并將變化反應到所有相關的地方,從而保證了數據的同步性。在Vue中,每個組件實例都擁有一個對應的“數據觀察者”(watcher)對象;它會在組件渲染的過程中把所有數據屬性與模板中的表達式建立起映射關系,并在觀察到數據變化時觸發重新渲染。
Vue的“響應式系統”是基于虛擬DOM所實現的,這使得Vue可以在“更新數據”和“更新UI”的方面更加高效。在Vue的內部中,當組件實例被創建并執行其初始化過程時,Vue會執行一個名為“mount”的方法。這個方法的作用是將虛擬DOM渲染成真實的DOM,并將其插入到頁面中。這個過程中,Vue通過調用“createElm”和“addVnodes”等方法來逐層遍歷虛擬DOM樹,并在節點間建立起正確的父子兄弟關系。
mount() { this.$el = this.compileToFunctions(this.template); new Watcher(this, this.updateComponent); return this; }
上面是Vue組件實例的“mount”方法的一個簡化實現。可以看到,“mount”會通過“compileToFunctions”方法將組件的模板編譯成可執行的JavaScript函數,并將函數返回的虛擬DOM保存在“$el”屬性中。后續,它又會創建一個“Watcher”實例,并將當前組件實例和一個用于更新UI的回調函數傳入其中。“Watcher”會自動將當前組件實例設置為自己的訂閱者,并在觀察到數據變化時觸發回調函數“updateComponent”。這個回調函數會判斷是否需要更新UI,如果需要則重新執行“render”方法,生成新的虛擬DOM,并使用“patch”方法對新舊虛擬DOM進行比對,最終完成UI的更新。