淺談vue單一組件下動態(tài)修改數(shù)據(jù)時的全部重渲染
今天在學習vue的過程中，發(fā)現(xiàn)一個有趣的現(xiàn)象。
在某一組件下的某一數(shù)據(jù)通過點擊事件被動態(tài)修改的時候，對應view中的數(shù)據(jù)同步的進行了修改，沒錯，這不是廢話嗎，vue的一大特色就是數(shù)據(jù)的雙向綁定?？捎腥さ氖?，該組件下我寫的另一個用Math.random()的data值對應的值和視圖也發(fā)生了變化
這就讓我這個剛入門的小白有點奇怪了，我修改一個，怎么變了兩個？？？？腦洞放開一想，會不會數(shù)據(jù)在雙向同步的時候，發(fā)生了什么，比如。是不是只要有一個節(jié)點變了，node都重新進行了加載？？？
我想這其中的緣由必定和vue數(shù)據(jù)的雙向綁定的原理有關聯(lián)，就搜索了一番，果然發(fā)現(xiàn)了些東西，就是DocumentFragment，之前好像見過，但沒怎么重視。那么它是用來干啥的呢:
DocumentFragment（文檔片段）可以看作節(jié)點容器，它可以包含多個子節(jié)點，當我們將它插入到 DOM 中時，只有它的子節(jié)點會插入目標節(jié)點，所以把它看作一組節(jié)點的容器。使用 DocumentFragment 處理節(jié)點，速度和性能遠遠優(yōu)于直接操作 DOM。
手動劃重點：Vue 進行編譯時，就是將掛載目標的所有子節(jié)點劫持（真的是劫持，通過 append 方法，DOM 中的節(jié)點會被自動刪除）到 DocumentFragment 中，經(jīng)過一番處理后，再將 DocumentFragment 整體返回插入掛載目標。
以上這篇淺談vue單一組件下動態(tài)修改數(shù)據(jù)時的全部重渲染就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了ElementUI 修改默認樣式的幾種辦法(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
Vue3使用TypeIt實現(xiàn)文字打字機效果的代碼示例
在現(xiàn)代網(wǎng)頁設計中,文字打字機效果是一種非常流行的動畫效果,能夠吸引用戶的注意力并提升用戶體驗,本文將介紹如何在 Vue 3 中使用 TypeIt 庫實現(xiàn)文字打字機效果,并分享一些實用的技巧和示例,需要的朋友可以參考下2025-01-01
這篇文章主要為大家介紹了前端高效配置化vue2?element?ui省時又省力,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
組件間通信簡單來說就是組件間進行數(shù)據(jù)傳遞。就像我們?nèi)粘５拇螂娫挘褪峭ㄓ嵉囊环N方式，你把話說給我聽，我把話說給你聽，說的話就是數(shù)據(jù)。電話就是通訊方式的一種。無論是 Vue 還是 React ，都得進行組件間通信。2021-05-05
在Vue中最重要、最核心的概念之一就是響應式系統(tǒng)。這個系統(tǒng)使得Vue能夠自動追蹤數(shù)據(jù)變化，并在數(shù)據(jù)發(fā)生變化時自動更新相關的DOM元素。本文將會探討Vue響應式系統(tǒng)的實現(xiàn)原理及其底層實現(xiàn)2023-03-03
Vue3.0中Ref與Reactive的區(qū)別示例詳析
在vue3中對響應式數(shù)據(jù)的聲明官方給出了ref()和reactive()這兩種方式,這篇文章主要給大家介紹了關于Vue3.0中Ref與Reactive區(qū)別的相關資料,需要的朋友可以參考下2021-07-07
解決vue打包后刷新頁面報錯：Unexpected token <
這篇文章主要介紹了解決vue打包后刷新頁面報錯：Unexpected token <相關知識點，需要的朋友們參考下。2019-08-08
本篇文章中主要介紹了Vue.js 中的 $watch使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要給大家介紹了關于vue打包上傳服務器刷新404問題的兩種方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
淺談vue中使用編輯器vue-quill-editor踩過的坑
這篇文章主要介紹了淺談vue中使用編輯器vue-quill-editor踩過的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08