簡易版本vue的實現和註解

       本文參考的是前輩的簡易版本Vue實現：http://www.cnblogs.com/canfoo/p/6891868.html，感謝。前輩GitHub地址：https://github.com/canfoo/self-vue

       雖然前輩的文章寫的已經很淺顯了，但依然沒有一開始就看懂代碼啊，對了，前輩的文章有它的github地址，上面能夠直接下載代碼。

       好在我雖不才卻能堅持，看了一下午終因而入了門，再通過一些試驗性的代碼修改和測試，終於明白是怎麼回事了。如今總結以下。

       核心思路：V1還不算徹底形態的Vue，因此直接從V2看起。

       具體思路：

       1，將Vue對象裏面的data所有做一次監聽。經過get的方式。

       2，一旦data裏面的數據發生改變，則被set方法劫持。第一層代理劫持產生內層的賦值

       3，內層觸發了更新依賴的函數，js代碼層次的數據變化更新到dom上面

      4，更新函數經過更該dom節點來更新dom，這個時候更新的不在innerHTML

      將Vue對象裏面的data所有做一次監聽。經過get的方式。

 下圖是遍歷，遍歷的結果是data裏面的數據，都執行get方法，實際是經過defineProperty的get方法實現的。因而都被緩存到observer裏面。

 

       一旦data裏面的數據發生改變，則被set方法劫持。第一層代理劫持產生內層的賦值

爲了直接修改data裏面數據，而不是經過data.方式修改數據，因此作了兩層代理劫持。這個原文做者也有說到。

外層代理

內存代理

內層觸發了更新依賴的函數，js代碼層次的數據變化更新到dom上面

也就是set下的通知函數。實際是告訴Watcher執行update。

更新函數經過更該dom節點來更新dom，這個時候更新的不在innerHTML

這裏涉及一個知識點：document.createDocumentFragment();DocumentFragments 是DOM節點。它們不是主DOM樹的一部分。一般的用例是建立文檔片斷，將元素附加到文檔片斷，而後將文檔片斷附加到DOM樹。在DOM樹中，文檔片斷被其全部的子元素所代替。

直接修改node的內容就會同步到dom中。