整體分析Vue的基本結構如下圖所示：（備註：完整程式碼github地址https://github.com/1512955040/MiniVue）
上圖中,為我們模擬最小vue的整體結構,首先建立一個vue型別,它負責把data中的成員注入到vue例項中,並且轉化成getter/setter,observer的作用是資料劫持,對data中的屬性進行資料監聽,如果資料發生變化會獲取到最新的值,並通知dep。Compiler的作用是解析每個元素中的指令和差值表示式並替換成相應的資料。Dep的作用是新增觀察者,當資料發生變化時通知所有的觀察者。Watcher內部有一個Update方法負責更新檢視,下面我們用程式碼的方式一一進行實現。
1.Vue.js功能：
1-1負責接收初始化的引數（選項）
1-2負責把data中的屬性注入到vue例項,轉化成getter/setter
1-3負責呼叫observer監聽data中所有屬性的變化
1-4負責呼叫Compiler解析指令/差值表示式
類圖結構如下：
如上圖所示：vue類中有三個屬性,分別是$options,$el,$data,這三個屬性記錄建構函式中傳過來的引數。_proxyData為vue類中的方法
所以以_開頭的成員就是私有成員,這個方法的功能是把data中的屬性轉化為getter和setter注入到vue例項中。
class Vue{
constructor(options) {
//1.通過屬性儲存選項中的資料
this.$options = options || {}
this.$data = options.data || {}
this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
//2.把data中的成員轉化為getter和setter,注入到vue例項中
this._proxyData(this.$data)
//3.呼叫observer物件,監聽資料的變化
new Observer(this.$data)
//4.呼叫compiler物件,解析指令和差值表示式
new Compiler(this)
}
//把Vue的屬性轉化為getter和setter,注入到Vue例項中
_proxyData(data){
//遍歷data中所有屬性
Object.keys(data).forEach(key=>{
//把data的屬性注入到vue例項全域性中
Object.defineProperty(this,key,{
enumerable:true,
configurable:true,
get(){
return data[key]
},
set(newValue){
if(newValue===data[key]){
return
}
data[key]=newValue
}
})
})
}
}
2.Observer.js功能（資料劫持）：
2-1 負責把data選項中的屬性轉化為響應式資料
2-2 data中的某個屬性也是物件,把該屬性轉化為響應式資料
2-3 資料變化傳送通知
類圖結構如下：
如上圖所示：
walk方法的作用是遍歷data中的所有屬性,defineReactive是定義響應式資料，也就是通過呼叫defineReactive方法把屬性轉化為getter和setter。
class Observer{
constructor(data) {
this.walk(data)
}
//walk方法遍歷data中的所有屬性
walk(data) {
//1.判斷data是否物件
if(!data || typeof data !=='object'){
return
}
//2.遍歷data物件的所有屬性
Object.keys(data).forEach(key=>{
this.defineReactive(data,key,data[key])
})
}
//degineReactivce方法定義響應式資料 把屬性轉化為getter和setter
defineReactive(obj,key,val) {
let that=this
// 負責收集依賴,併發送通知
let dep=new Dep()
//如果val傳入物件的話也給物件裡面的屬性新增getter和setter方法
this.walk(val)
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get(){
// 收集依賴
Dep.target && dep.addSub(Dep.target)
return val
},
set(newValue){
if(newValue==val){
return
}
val=newValue
//如果給屬性重新賦值成物件,給物件裡面的屬性重新新增getter和setter方法
//比如:歷史資料vm.msg="Hello World" 修改之後vm.msg={a:'Hwllo World'}
//再次呼叫此方法給vm.msg.a重新新增getter和setter方法
that.walk(newValue)
//傳送通知
dep.notify()
}
})
}
}
3.Compiler.js功能：
3-1 負責編譯模板,解析指令/差值表示式
3-2 負責頁面的首次渲染
3-3 當資料變化後重新渲染檢視
類圖結構如下：
如上圖所示：
el為建構函式傳過來的options.el,vm是vue的例項,下面都是vm的方法，對DOM進行操作。compile方法內部遍歷dom物件的所有節點,並且
判斷這些節點是文字節點，如果是文字節點解析差值表示式,如果是元素節點解析指令,isTextNode和isElementNode方法判斷是文字節點還
是元素節點。compileElement和compileText方法解析差值表示式和指令。isDirective這個方法判斷元素屬性是否是指令。
4.Dep.js功能：
4-1 收集依賴，新增觀察者(watcher)
4-2 通知所有觀察者
如上圖所示:
在vue的響應式機制中,使用觀察者模式來響應資料的變化,Dep的作用是收集依賴，在getter方法中收集依賴,在setter方法中通知依賴，每
一個響應式的屬性都會場景一個Dep物件，負責收集所有依賴於該屬性的地方,所有依賴於該屬性的位置都會建立一個watcher物件，所以
Dep就是收集於該屬性的watcher物件，使用setter方法去通知依賴，當屬性發生變化時呼叫nodify方法去傳送通知，然後呼叫watcher物件
的update方法。
類的機構如下圖：
如上圖所示：
subs是一個數組，儲存dep中所有的watcher,addSub方法新增watcher,notify方法釋出通知
class Dep{
constructor() {
//儲存所有的觀察者
this.subs=[]
}
// 新增觀察者
addSub(sub){
if(sub && sub.update) {
this.subs.push(sub)
}
}
//傳送通知
notify(){
this.subs.forEach(sub =>{
sub.update()
})
}
}
5.Watcher.js功能：
5-1 當資料變化觸發依賴,dep通知所有的Watcher例項更新檢視
5-2 自身例項化的時候往dep物件中新增自己
如上圖所示：
data中的每一個屬性都要建立一個Dep物件, 在收集依賴的時候把所有物件的watcher新增到dep物件的subs陣列中,在setter物件中傳送通
知,呼叫Dep物件的notify方法通知所有關聯的watcher物件更新檢視。
類圖結構如下：
如上圖所示：
update物件更新檢視，cb回撥函式,指明如何更新檢視。在更新檢視的時候需要一個屬性key(data中的屬性名稱),oldvalue是key 對應的值。
class Watcher{
constructor(vm,key,cb) {
this.vm=vm
//data中的屬性名稱
this.key=key
//回撥函式負責更新檢視
this.cb=cb
//把watcher物件記錄到Dep類的靜態屬性target
Dep.target =this
//觸發get方法,在get方法中會呼叫addSub
this.oldValue=vm[key]
Dep.target=null
}
//當資料發生變化時更新檢視
update(){
let newValue=this.vm[this.key]
if(this.oldValue === newValue){
return
}
this.cb(newValue)
}
}
下面通過這張圖作整體流程的總結：
