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