今天在學習vue的過程中，發現一個有趣的現象。

在某一組件下的某一數據通過點擊事件被動態修改的時候，對應view中的數據同步的進行了修改，沒錯，這不是廢話嗎，vue的一大特色就是數據的雙向綁定。可有趣的是，該組件下我寫的另一個用Math.random()的data值對應的值和視圖也發生了變化

這就讓我這個剛入門的小白有點奇怪了，我修改一個，怎么變了兩個？？？？腦洞放開一想，會不會數據在雙向同步的時候，發生了什么，比如。是不是只要有一個節點變了，node都重新進行了加載？？？

我想這其中的緣由必定和vue數據的雙向綁定的原理有關聯，就搜索了一番，果然發現了些東西，就是DocumentFragment，之前好像見過，但沒怎么重視。那么它是用來干啥的呢:

DocumentFragment（文檔片段）可以看作節點容器，它可以包含多個子節點，當我們將它插入到 DOM 中時，只有它的子節點會插入目標節點，所以把它看作一組節點的容器。使用 DocumentFragment 處理節點，速度和性能遠遠優于直接操作 DOM。

手動劃重點：Vue 進行編譯時，就是將掛載目標的所有子節點劫持（真的是劫持，通過 append 方法，DOM 中的節點會被自動刪除）到 DocumentFragment 中，經過一番處理后，再將 DocumentFragment 整體返回插入掛載目標。

以上這篇淺談vue單一組件下動態修改數據時的全部重渲染就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。