淺談vue單一組件下動態(tài)修改數(shù)據(jù)時(shí)的全部重渲染
今天在學(xué)習(xí)vue的過程中，發(fā)現(xiàn)一個(gè)有趣的現(xiàn)象。
在某一組件下的某一數(shù)據(jù)通過點(diǎn)擊事件被動態(tài)修改的時(shí)候，對應(yīng)view中的數(shù)據(jù)同步的進(jìn)行了修改，沒錯(cuò)，這不是廢話嗎，vue的一大特色就是數(shù)據(jù)的雙向綁定。可有趣的是，該組件下我寫的另一個(gè)用Math.random()的data值對應(yīng)的值和視圖也發(fā)生了變化
這就讓我這個(gè)剛?cè)腴T的小白有點(diǎn)奇怪了，我修改一個(gè)，怎么變了兩個(gè)？？？？腦洞放開一想，會不會數(shù)據(jù)在雙向同步的時(shí)候，發(fā)生了什么，比如。是不是只要有一個(gè)節(jié)點(diǎn)變了，node都重新進(jìn)行了加載？？？
我想這其中的緣由必定和vue數(shù)據(jù)的雙向綁定的原理有關(guān)聯(lián)，就搜索了一番，果然發(fā)現(xiàn)了些東西，就是DocumentFragment，之前好像見過，但沒怎么重視。那么它是用來干啥的呢:
DocumentFragment（文檔片段）可以看作節(jié)點(diǎn)容器，它可以包含多個(gè)子節(jié)點(diǎn)，當(dāng)我們將它插入到 DOM 中時(shí)，只有它的子節(jié)點(diǎn)會插入目標(biāo)節(jié)點(diǎn)，所以把它看作一組節(jié)點(diǎn)的容器。使用 DocumentFragment 處理節(jié)點(diǎn)，速度和性能遠(yuǎn)遠(yuǎn)優(yōu)于直接操作 DOM。
手動劃重點(diǎn)：Vue 進(jìn)行編譯時(shí)，就是將掛載目標(biāo)的所有子節(jié)點(diǎn)劫持（真的是劫持，通過 append 方法，DOM 中的節(jié)點(diǎn)會被自動刪除）到 DocumentFragment 中，經(jīng)過一番處理后，再將 DocumentFragment 整體返回插入掛載目標(biāo)。
以上這篇淺談vue單一組件下動態(tài)修改數(shù)據(jù)時(shí)的全部重渲染就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue引用echarts超詳細(xì)步驟,vue中優(yōu)雅的使用echarts?在前端工作中,數(shù)據(jù)可視化用得最多的,可能就是圖表了,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue封裝一個(gè)日歷組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vuex存取值和映射函數(shù)使用說明，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程
這篇文章主要介紹了vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程，其中聲明式router-link實(shí)現(xiàn)跳轉(zhuǎn)最簡單的方法，可用組件router-link來替代a標(biāo)簽，每種方式給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11
vue-router中query和params的區(qū)別解析
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用，這篇文章主要介紹了vue-router中query和params的區(qū)別 ,需要的朋友可以參考下2022-10-10
在vue中會將常用的組件進(jìn)行封裝,下面這篇文章主要給大家介紹了關(guān)于Vue組件封裝之input輸入框的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue實(shí)現(xiàn)各種文件文檔下載及導(dǎo)出示例
這篇文章主要介紹了vue實(shí)現(xiàn)各種文件文檔下載及導(dǎo)出示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了Vue+elementUI下拉框自定義顏色選擇器方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了vue中?$forceUpdate的使用解析，該方案是比較好的一種方式，比如說我們嘗試直接給某個(gè)??object??增加一個(gè)屬性，發(fā)現(xiàn)頁面上沒有效果；直接將length變成0來清空數(shù)組，下文詳細(xì)資料需要的小伙伴可以參考一下2022-04-04
本篇文章主要介紹了在Vue中使用Compass的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03