成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

learn_shifeng / 597人閱讀

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

昨天寫了一下節(jié)點綁定model的替換，已經(jīng)如何檢測model 的方法
今天優(yōu)化一下，勉強實現(xiàn)一個雙向綁定
看下昨天的代碼




    這里是{{title}}

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

稍微加工了一下




    這里是{{title}}

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105243.html

相關(guān)文章

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

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

    raise_yang 評論0 收藏0

  • 從零開始單排學(xué)設(shè)計模式「UML類圖」定級賽

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

    Loong_T 評論0 收藏0

  • 最新【從零單排】系列流出，教你如何實現(xiàn)字典存儲結(jié)構(gòu)

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

    crossea 評論0 收藏0

  • 從零單排學(xué)Redis【黃金】

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

    Mr_houzi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<