Tag

VNode

0 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 14, 2023 · Frontend Development

Understanding Vue's Diff Algorithm: A Step‑by‑Step Guide

This article explains Vue's diff algorithm in detail, covering prerequisite concepts about VNode, left‑ and right‑side comparisons, handling arrays of different lengths, and the complete implementation with code examples to help developers grasp how Vue efficiently updates the DOM.

VNodeVuecode
0 likes · 11 min read
Understanding Vue's Diff Algorithm: A Step‑by‑Step Guide
Sohu Tech Products
Sohu Tech Products
Dec 15, 2021 · Frontend Development

Implementing a Simple Virtual DOM Library with Patch and Diff Algorithms

This article explains how to build a lightweight virtual DOM library in JavaScript, covering the creation of VNode objects, the patch and diff algorithms, handling of attributes, classes, styles, and events, and demonstrates a step‑by‑step implementation using the Snabbdom approach.

PatchSnabbdomVNode
0 likes · 18 min read
Implementing a Simple Virtual DOM Library with Patch and Diff Algorithms
ByteFE
ByteFE
Dec 9, 2020 · Frontend Development

Building a Mini‑Program Framework with Vue 3.0: Custom Renderer, VNode and Template Generation

This article explains how to use Vue 3.0’s Composition API, TypeScript support, and custom render capabilities to create a mini‑program framework, covering file structure, VNode implementation, nodeOps adaptation, template compilation, and dynamic template selection with full code examples.

Composition APICustom RendererVNode
0 likes · 23 min read
Building a Mini‑Program Framework with Vue 3.0: Custom Renderer, VNode and Template Generation
Xueersi Online School Tech Team
Xueersi Online School Tech Team
Apr 24, 2020 · Frontend Development

How Vue Transforms a .vue Component into a VNode

This article explains step by step how Vue.js converts a .vue component file into a virtual DOM node by using Vue.extend, createComponent, installComponentHooks, and the VNode constructor, illustrated with real source code snippets and detailed commentary.

VNodeVuecomponent
0 likes · 12 min read
How Vue Transforms a .vue Component into a VNode
Xueersi Online School Tech Team
Xueersi Online School Tech Team
Apr 10, 2020 · Frontend Development

Understanding Vue's Virtual DOM: VNode Creation, Rendering Flow, and Core Utilities

This article explains how Vue 2 implements a virtual DOM by describing the structure of VNode objects, the render function, the createElement process, and the normalization utilities, providing detailed code examples and step‑by‑step analysis of the rendering pipeline.

Render FunctionVNodeVue
0 likes · 14 min read
Understanding Vue's Virtual DOM: VNode Creation, Rendering Flow, and Core Utilities