大胖餃子喲
(一)、優先處理特殊場景
(1)、頭部的同類型節點、尾部的同類型節點
這類節點更新前後位置沒有發生變化,所以不用移動它們對應的DOM
(2)、頭尾/尾頭的同類型節點
這類節點位置很明確,不需要再花心思查找,直接移動DOM就好
(二)、“原地複用”“原地複用”是指Vue會盡可能複用DOM,儘可能不發生DOM的移動。Vue在判斷更新前後指針是否指向同一個節點,其實不要求它們真實引用同一個DOM節點,實際上它僅判斷指向的是否是同類節點,如果是同類節點,那麼Vue會直接複用DOM,例如通過對換文本內容的方式,這樣的好處是不需要移動DOM。
2.Vue支持雙向數據綁定
數據綁定有單向數據綁定和雙向數據綁定。
什麼是單向數據綁定?單向數據綁定即一方面只受另一方面影響,卻無法影響另一方面。前端常說的單向數據綁定一般都指數據影響頁面,而頁面不影響數據。
什麼是雙向數據綁定?雙向的意思即兩個方面相互影響,前端來說,即數據影響頁面,頁面同時影響數據。例如,在 MVVM 框架中,View(視圖) 和 Model(數據) 是不可以直接通訊的,在它們之間存在著 ViewModel 這個中間介充當著觀察者的角色。當用戶操作 View(視圖),ViewModel 感知到變化,然後通知 Model 發生相應改變;反之當 Model(數據) 發生改變,ViewModel 也能感知到變化,使 View 作出相應更新。
舉個栗子以上代碼將input的value和頁面顯示雙向綁定在一起。其實v-model只是語法糖,雙向綁定其實就等於單向綁定+UI時間監聽,只不過Vue將過程採用黑箱封裝起來了。
那雙向綁定有什麼好處?好處就是方便,數據自動更新。而缺點就是無法得知是哪裡更改了數據。
3.Vue支持組件化
組件化的概念Web 中的組件其實就是頁面組成的一部分,好比是電腦中的每一個元件(如硬盤、鍵盤、鼠標),它是一個具有獨立的邏輯和功能或界面,同時又能根據規定的接口規則進行相互融合,變成一個完整的應用,頁面就是有一個個類似這樣的部分組成,比如導航、列表、彈窗、下拉菜單等。頁面只不過是這些組件的容器,組件自由組合形成功能完善的界面,當不需要某個組件,或者想要替換某個組件時,可以隨時進行替換和刪除,而不影響整個應用的運行。
組件化的特性高內聚性,組建功能必須是完整的,如我要實現下拉菜單功能,那在下拉菜單這個組件中,就把下拉菜單所需要的所有功能全部實現。
低耦合度,通俗點說,代碼獨立不會和項目中的其他代碼發生衝突。在實際工程中,我們經常會涉及到團隊協作,傳統按照業務線去編寫代碼的方式,就很容易相互衝突,所以運用組件化方式就可大大避免這種衝突的存在、
每一個組件都有子集清晰的職責,完整的功能,較低的耦合便於單元測試和重複利用。
組件化的優點1.提高開發效率 2.方便重複使用 3.簡化調試步驟 4.提升整個項目的可維護性 5.便於協同開發
程序員小樊
一個是傳統開發模式,一個需要用腳手架,打包後在一個HTML上渲染