vue

This repository contains a copy of the Vue 2 source code with line-by-line annotations added in Chinese, along with flow charts that map out how the framework works internally. The author spent roughly a year reading through Vue's source code in their spare time and found that most online explanations were fragmented, so they decided to annotate every line themselves and share the result.

Vue is a popular JavaScript framework for building web user interfaces. Understanding how it works under the hood requires reading through several interconnected systems. This project walks through four main areas. First, template compilation: Vue takes the HTML-like templates that developers write and converts them into an internal tree structure called an AST, then transforms that tree into JavaScript render functions. Second, data reactivity: Vue tracks which data each part of the UI depends on, and when data changes, it automatically updates only the affected parts of the page. Third, the virtual DOM: rather than modifying the actual browser page directly on every change, Vue builds a lightweight representation of the page in memory and compares it against the previous version before touching the real DOM. Fourth, the diff algorithm: Vue uses a comparison process with four pointer indices to figure out the minimum number of changes needed when updating a list of elements.

The annotations explain not just what each function does but why it exists, drawing on the author's years of practical experience building with Vue. The README includes excerpts of the annotated source code showing the initialization sequence when a Vue instance is created, covering lifecycle setup, event registration, data observation, and template mounting.

The project is aimed at developers who already use Vue and want to understand its internals. The README and all annotations are written in Chinese. Contact details for questions are included in the repository description. The full README is longer than what was shown.