# hcysunyang/vue-design

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/hcysunyang-vue-design).**

5,964 stars · 899 forks · JavaScript

## Links

- GitHub: https://github.com/HcySunYang/vue-design
- Homepage: http://hcysun.me/vue-design/zh/
- awesome-repositories: https://awesome-repositories.com/repository/hcysunyang-vue-design.md

## Description

This project is a Virtual DOM renderer, an engine that transforms virtual node trees into real DOM elements and updates them efficiently when the tree changes. Its core identity is focused on the rendering and reconciliation of virtual nodes, providing the foundational mechanism for building user interfaces.

The renderer implements a patch-based DOM update system that applies targeted operations based on computed differences between virtual node trees. It supports fragment rendering for components with multiple root children, uses keyed child reconciliation to reuse and reorder elements during list updates, and employs lazy attribute diffing to only update changed properties on real DOM nodes. A hooks-based lifecycle system invokes user-defined callbacks at mount, update, and unmount phases, while event delegation via props attaches listeners through virtual node props with automatic cleanup.

The project covers the full scope of virtual DOM rendering, from initial tree creation to efficient incremental updates. Its documentation and implementation surface provide a complete reference for how a virtual DOM renderer operates internally.

## Tags

### User Interface & Experience

- [Virtual DOM Rendering Engines](https://awesome-repositories.com/f/user-interface-experience/virtual-dom-rendering-engines.md) — Renders a virtual node tree into real DOM elements and updates them efficiently when the tree changes. ([source](http://hcysun.me/vue-design/zh/))
- [Virtual DOM Engines](https://awesome-repositories.com/f/user-interface-experience/virtual-dom-engines.md) — Transforms virtual node trees into real DOM elements and updates them efficiently when the tree changes.

### Graphics & Multimedia

- [Lazy Attribute Differs](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/dom-web-rendering-strategies/surgical-dom-update-engines/attribute-only-updates/lazy-attribute-differs.md) — Defers attribute comparison until patch time, only updating changed properties on real DOM nodes.

### Web Development

- [Lifecycle Hooks](https://awesome-repositories.com/f/web-development/dom-interaction-hooks/lifecycle-hooks.md) — Invokes user-defined callbacks at mount, update, and unmount phases via internal hook arrays.
- [DOM Patching](https://awesome-repositories.com/f/web-development/dom-patching.md) — Applies targeted DOM operations (create, remove, replace, set attributes) based on patch flags.
- [Keyed List Reconciliation](https://awesome-repositories.com/f/web-development/dom-patching/list-patching/keyed-list-reconciliation.md) — Uses unique keys to reuse and reorder child elements during list updates, avoiding unnecessary recreation.
- [Event Delegation](https://awesome-repositories.com/f/web-development/event-delegation.md) — Attaches event listeners to DOM elements through virtual node props with automatic cleanup on unmount.
- [Fragment Renderers](https://awesome-repositories.com/f/web-development/rendering-templating/iterative-fragment-rendering/fragment-renderers.md) — Renders virtual nodes with multiple root children by managing a list of sibling DOM elements.
- [Virtual DOM Reconciliation](https://awesome-repositories.com/f/web-development/virtual-dom-reconciliation/virtual-dom-reconciliation.md) — Compares two virtual node trees to compute minimal DOM mutations using a diff algorithm.

### Part of an Awesome List

- [Vue Ecosystem](https://awesome-repositories.com/f/awesome-lists/devtools/vue-ecosystem.md) — In-depth architectural design and implementation analysis of Vue.