從零單排系列之寫一個類vue框架(二)

learn_shifeng 發布于2019-08-23 18:27 / 593人閱讀

摘要：昨天寫了一下節點綁定的替換，已經如何檢測的方法今天優化一下，勉強實現一個雙向綁定看下昨天的代碼這里是在實現雙向綁定之前，先普及一個和的知識。如果強行給之前的賦值，就會發生無限的情況。畢竟還在正式學習期。

昨天寫了一下節點綁定model的替換，已經如何檢測model 的方法
今天優化一下，勉強實現一個雙向綁定
看下昨天的代碼



    這里是{{title}}

在實現雙向綁定之前，先普及一個set 和 get 的知識。我說點大白話，反正也不是專業的。
一個對象的key在被賦值 value 的時候，被攔截，觸發set方法，set的參數就是那個 value
但是這個賦值就會被攔截了，所以需要給一個新的key一個值。然后把value賦值到新的值上面去。如果強行給之前的key賦值，就會發生無限set 的情況。

稍微加工了一下



    這里是{{title}}

代碼有些粗劣，但是功能是實現了。
1.首先先讀取 new Vue傳入對象時候，data 里面的數據，然后對其進行遍歷，給實例化對象添加同名屬性，這個同名屬性主要就是用來被監聽set,get（雙向綁定實現的基本原理）。也就是 vue.prototype.getData

2.然后呢，去遞歸dom樹（這個以后再寫，先簡單就一層，不然寫的內容會增多很多），然后用正則過濾出里面 {{}}類型的節點，將這個節點的原始內容（比如{{title}}保存到這個節點的一個自定義屬性里，我寫的是realData），并將這個節點添加到watcher里面去。也就是vue.prototype.watcher

3.然后呢，在同名屬性被設置的時候呢，就觸發鉤子函數，將這個同名屬性所涉及到的節點的data給更新。也就是vue.prototype.digest

如果上面的內容沒有看的太明白的話，可以參考一下代碼注釋。。。我下線看看怎么優化代碼或者優化思路，晚上或者明天更新。我還得看看vue的文檔。畢竟還在正式學習期。

GPU云服務器云服務器 php類框架 java對象類框架單排搭建一個java框架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105243.html

從零單排系列之寫一個類vue框架(一)

摘要：因為我希望這是一個系列的文章，所以開始之前先簡單說一下，我幾乎沒用過這個框架寫過項目，所以文章中難免會有一些比較外行的說法。先整理用法，然后再整理自己的框架。因為我希望這是一個系列的文章，所以開始之前先簡單說一下，我幾乎沒用過vue這個框架寫過項目，所以文章中難免會有一些比較外行的說法。當然，我用過一些時間的angular，也曾經解決過一些同行們vue方面的問題。所以如果有人原因看的...

raise_yang 2019-08-23 18:26 評論0 收藏0
從零開始單排學設計模式「UML類圖」定級賽

摘要：從零開始單排學設計模式的國服排位之旅，今天正式開啟目前段位定級賽這篇文章來總結下類圖，本來不打算講類圖的，因為我在學習設計模式的時候，一遇到有關的就會自動忽略，一看感覺就很復雜。關聯關系用實現箭頭來表示。閱讀本文大概需要 3.5 分鐘。本篇是設計模式系列的開篇，雖然之前也寫過相應的文章，但是因為種種原因后來斷掉了，而且發現之前寫的內容也很渣，不夠系統。所以現在打算重寫，加上距離現...

Loong_T 2019-08-16 15:04 評論0 收藏0
最新【從零單排】系列流出，教你如何實現字典存儲結構

摘要：昨天在星球的從零單排系列分享了一篇字典存儲結構的實現方式，我覺得這篇文章寫的還是蠻好的，就分享給大家了。這周活動力度優惠開到最大了，現在只要元，邀請朋友還能返現元。 showImg(https://segmentfault.com/img/remote/1460000018992017); 昨天在星球的【從零單排】系列分享了一篇【字典存儲結構的實現方式】，我覺得這篇文章寫的還是蠻好的，...

crossea 2019-07-31 10:21 評論0 收藏0
從零單排學Redis【黃金】

摘要：當被監聽的準備好執行連接應答讀取等等操作時，與操作相對應的文件事件就會產生，根據文件事件來為關聯對應的事件處理器，從而實現功能。服務器使用單線程單進程的方式處理命令請求。前言只有光頭才能變強好的，今天我們要上黃金段位了，如果還沒經歷過青銅和白銀階段的，可以先去蹭蹭經驗再回來：從零單排學Redis【青銅】從零單排學Redis【白銀】看過相關Redis基礎的同學可以知道Re...

Mr_houzi 2019-08-16 13:39 評論0 收藏0