手寫Vue2 0響應式原理

今天來實現乙個簡易版的vue2.0響應式

class vue 

})// 響應化
this.observe(this.$data)
// 測試**
// new watcher(this, 'test')
// this.test
// 建立編譯器
// new compile(options.el, this)
if (options.created) 
}// 遞迴遍歷，使傳遞進來的物件響應化
observe(value) 
if (array.isarray(value)) 
object.keys(value).foreach(key => )
}// 在vue根上定義屬性**data中的資料,這樣就能通過 this 呼叫資料
proxydata(key) ,
set(newval) })}
definereactive(obj, key, val) ,
set(newval) 屬性更新了`)
dep.notify() // 通知檢視更新}}
})}
}// dep: 管理若干watcher例項，它和key一對一關係
class dep 
adddep(watcher) 
notify() 
}// 實現update函式可以更新
class watcher 
update() 屬性更新了`)
this.cb.call(this.vm, this.vm[this.key])
}}

需要注意的是object.defineproperty的缺點是不能**陣列，所以我們需要對陣列的方法進行重寫，詳細部分請重新看上面的**，這部分是面試要考的重點。

vue2.0還有乙個比較明顯的缺點就是，物件上不存在的屬性，不能被**，因為從上面的**，我們能看出observe遍歷的是物件上已經有的屬性，所以沒有的屬性就不會被**，我們就必須通過呼叫$set()方法去將新加的屬性響應式，這個缺點會在vue3.0中彌補，有興趣的同學可以看看vue3.0的原始碼。

Vue2 0響應式原理

最近vue3.0響應式原理引起前端陣陣狂熱，所以我也下定決心將vue的響應式原理總結一下。我們都知道vue2.0的響應式原理使用的乙個核心api是object.defineproperty.為我們要觀察的資料設定getter和setter方法。我們可以看到如果響應式的資料多的時候，我們需要迴圈遍歷d...

vue2 0響應式原理的應用

監測屬性的變化 function observe target 對物件中的每乙個屬性進行監視 for let key in target function definereactive target,key,value set newval function updateview let data ...

Vue 2 0中的響應式原理實現

主要原理 使用object.defineproperty方法給物件的每乙個屬性註冊 get 和set方法，在set方法中執行render方法進行頁面重新渲染 let obj 定義響應式，此方法用來對某一物件進行註冊set和get方法操作 let definereactive obj,key,valu...