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