@diff / 博客 RSS 訂閱

Mar 14 2020

qzuser - vue虛擬dom diff

虛擬元素節點VNode 什麼是虛擬元素節點？ 虛擬元素節點即對真實dom節點的描述。包含標籤名、標籤屬性描述對象、子節點集合。 // example { tag:'div' props:{ key:'uuid',//VNode唯一key，新舊VNode diff時有用 id:'div',//VNode id值 //...

vue.js , virtual-dom , diff

收藏 評論

Feb 05 2022

HeiYanjing - 迷你版React實現分析

Virtual Dom和Diff算法 React.creaeElement() Babel 會對將 JSX 編譯為 React API(React.creaeElement())，React.creaeElement()會返回一個Virtual Dom,React會將Virtual Dom轉換為真是Dom，顯示到頁面中。 jsx轉換為Virtual Dom結構，type,props,chil

react , virtual-dom , diff

收藏 評論

Oct 11 2021

懟懟 - 【vue】虛擬DOM與Diff算法

虛擬DOM與Diff算法 虛擬DOM snabbdom Vue中的Diff算法 1 虛擬DOM 概述 VNode 1.1 概述 原生DOM為我們提供了一些獲取DOM元素以及操作DOM元素的API，可以對DOM元素進行增刪改查。 複雜的頁面狀態維護需要提前寫好大量的DOM操作，會造成狀態很難維護，代碼的邏輯也很混亂。 所以我們會使用數據驅動的方式進行視圖更新 - 數據與

vue.js , 虛擬dom , virtual-dom , diff

收藏 評論

Nov 28 2025

mob64ca1409970a - 轉載一篇有關於diff的文章，方便以後複習

Unified Diff格式詳解：基於sebastian/diff的實戰案例 你是否在代碼審查時看不懂Git輸出的差異信息？是否在開發工具時需要精確比較文本差異？本文將帶你深入理解Unified Diff（統一差異格式），並通過sebastian/diff項目的實戰案例，掌握差異比較的核心原理與應用方法。讀完本文後，你將能夠：解析U

php , Unified , diff , 前端開發 , Javascript

收藏 評論

Jul 05 2022

Howie - Virtual DOM 及 Diff 算法

react 模擬實現代碼傳送門Tiny React 1. JSX 到底是什麼 使用 React 就一定會寫 JSX，JSX 到底是什麼呢？它是一種 JavaScript 語法的擴展，React 使用它來描述用户界面長成什麼樣子。雖然它看起來非常像 HTML，但它確實是 JavaScript 。在 React 代碼執行之前，Babel 會對將 JSX 編譯為 React API. div class

react , virtual-dom , diff

收藏 評論

Jan 20 2020

wupengyu - react核心

react核心思想 簡單來説，就是virtual dom react diff。 我們都知道在前端開發中，js運行很快，dom操作很慢，而react充分利用了這個前提。在react中render的執行結果是樹形結構的javascript對象，當數據(state || props)發生變化時，會生成一個新的樹形結構的javascript對象，這兩個javascript對象我們可以稱之為vir

react , ecmascript-6 , virtual-dom , diff , 前端

收藏 評論

Aug 23 2019

chaumet - Vue中的虛擬DOM及diff算法

虛擬dom 為什麼出現： 瀏覽器解析一個html大致分為五步：創建DOM tree – 創建Style Rules - 構建Render tree - 佈局Layout – 繪製Painting。每次對真實dom進行操作的時候，瀏覽器都會從構建dom樹開始從頭到尾執行一遍流程。真實的dom操作代價昂貴，操作頻繁還會引起頁面卡頓影響用户體驗，虛擬dom就是為了解決這個瀏覽器性能問題才被創造出

vue.js , virtual-dom , diff , Javascript

收藏 評論

Dec 14 2019

大白兔粘牙 - Virtual Dom - Diff 之 patchVnode 方法

該方法用來真正對新舊節點進行對比，得到最小應該變化的DOM，然後直接更新DOM。下面是需要patch的幾種情況，這幾種情況都會有對應的真實DOM測試用例來驗證。 function patchVnode(oldVnode, vnode) { const elm = vnode.elm = oldVnode.elm; const { children: oldCh } = oldVn

vue.js , virtual-dom , diff

收藏 評論

Aug 27 2019

sanget - React 中 Virtual DOM 與 Diffing 算法的關係

前言 這篇文章是基於 React 官方文檔對於 Virtual DOM 的理念和 Diffing 算法的策略的整合。 Virtual DOM 是一種編程理念 Virtual DOM 是一種編程理念。UI 信息被特定語言描述並保存到內存中，再通過特定的庫，例如 ReactDOM 與真實的 DOM 同步信息。這一過程成為 協調 (Reconciliation)。 與之對應的數據結構 Virtual D

react , virtual-dom , diff

收藏 評論

Nov 05 2025

高志鵬 - 在 Vue 中為什麼不推薦用 index 做 key

尤大在vue 2.x的文檔中明確指出：建議儘可能在使用v-for時提供keyattribute，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。 尤大的建議説白了就是説： 如果index可以做key，那直接底層幫你傳進去好了，又何必讓你們多此一舉呢？乖乖的不要用index做key 那麼:key 到底有什麼用？ 當 Vue.js 用 v-for 正在更新已渲染過的元素

vue.js , key , mvvm , diff , 前端

收藏 評論