下面我就為大家分享一篇淺談vue單一元件下動態修改資料時的全部重渲染，具有很好的參考價值，希望對大家有所幫助。
今天在學習vue的過程中，發現一個有趣的現象。
在某一元件下的某一資料透過點擊事件被動態修改的時候，對應view中的資料同步的進行了修改，沒錯，這不是廢話嗎，vue的一大特色就是數據的雙向綁定。可有趣的是，該元件下我寫的另一個用Math.random()的data值對應的值和視圖也發生了變化
這就讓我這個剛入門的小白有點奇怪了，我修改一個，怎麼變了兩個？ ？ ？ ？腦洞放開一想，會不會資料在雙向同步的時候，發生了什麼，例如。是不是只要有一個節點變了，node都重新進行了載入？ ？ ？
我想這其中的緣由必定和vue資料的雙向綁定的原理有關聯，就搜尋了一番，果然發現了些東西，就是DocumentFragment，之前好像見過，但沒怎麼重視。那麼它是用來幹啥的呢:
DocumentFragment（文檔片段）可以看作節點容器，它可以包含多個子節點，當我們將它插入到DOM 中時，只有它的子節點會插入目標節點，所以把它看成一組節點的容器。使用 DocumentFragment 處理節點，速度和效能遠優於直接操作 DOM。
手動劃重點：Vue 進行編譯時，就是將掛載目標的所有子節點劫持（真的是劫持，透過append 方法，DOM 中的節點會自動刪除）到DocumentFragment 中，經過一番處理後，再將DocumentFragment 整體傳回插入掛載目標。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
在react-router4中進行程式碼分割的方法（基於webpack）
以上是在vue中如何實現單一元件下動態修改資料時的全部重渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！
