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

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

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

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

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

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

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

JQuery選中select組件被選中的值方法

vue.js中$set與數組更新方法_vue.js

在react-router4中進行代碼拆分的方法（基于webpack）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com