Vue3 optimizes event handler performance through a caching mechanism by reusing the same event handlers during component re-renders instead of recreating them. During the compilation phase, template event bindings are compiled into render function code, and each event handler is assigned a unique cache key stored in the component's `_cache` object. The cache key is generated based on the event type and template position: native DOM events use incrementing numbers, while custom events use name hashes. Dynamic event names generate complex keys. The cache is bound to the component instance—initialized during mount, checked during rendering, and cleared during unmount. Dynamic events and inline functions have special handling strategies. The caching mechanism reduces function creation, avoids unnecessary child component re-renders, and lowers garbage collection pressure. It is deeply integrated with the reactivity system, supporting reactive data access and event name changes. Compared to other frameworks like React (which lacks a similar caching mechanism) or Svelte (which optimizes at compile time), and Angular (which relies on change detection), Vue3 allows advanced users to customize caching strategies, such as modifying the key generation algorithm, disabling caching for specific events, or implementing custom cleanup logic.
Read more
Static hoisting in Vue 3 is a key optimization technique during the template compilation phase. By statically analyzing and identifying nodes that will not change, they are extracted outside the render function to avoid repeated creation of static nodes. This requires conditions such as no dynamic attributes, no directives, and fully static child nodes. Hoisting is categorized into different levels, including fully static nodes, static attribute nodes, and static subtrees. The compilation process involves AST transformation, code generation, and runtime integration. Performance tests show that static hoisting significantly reduces rendering time. This optimization works in conjunction with caching mechanisms, PatchFlags, and other features but has limitations such as dynamic components, root nodes with directives, etc. Compared to React's `memo` or Preact's static node marking, Vue 3's static hoisting is completed at the compilation stage, offering greater automation advantages. The core implementation is located in the `transform` module of `compiler-core`, where static nodes are processed through a depth-first traversal of the AST.
Read more
Vue 3's slot mechanism undergoes a complex transformation process during the compilation phase, converting slot content in templates into specific render function code. Regular slots are transformed into `_renderSlot` function calls, while named slots follow a similar process but specify a name. Scoped slots allow child components to pass data, and the compilation generates functions containing slot props. Parent component slot content is compiled into functions, with dynamic slot names handled as dynamic expressions, supporting destructuring syntax. The compiler correctly processes multiple slots with the same name by merging them into a combined function. The compiler adds optimization markers, such as the `STABLE` static marker and the `DYNAMIC` dynamic marker. The compilation flow includes parsing, transformation, code generation, and optimization phases. Scoped slots receive additional processing for parameter destructuring, and fallback content is displayed when no content is provided. The compiler performs validation checks for duplicate names, invalid variable references, incorrect directives, etc., to ensure correctness.
Read more
The Vue 3 directive system undergoes a transformation process from template strings to executable code during the compilation phase, including key steps such as directive parsing, AST generation, and code generation. Directive parsing first separates the directive name and parameters while handling modifiers. Structural directives like `v-if` and `v-for` are converted into conditional expressions or loop statements. Event directives like `v-on` generate wrapper functions containing modifier logic. Custom directives registered via the `directives` option result in special patch flags generated by the compiler. Dynamic argument directives require additional runtime parsing logic. When multiple directives are applied to the same element, the compiler must determine their execution order. In SSR environments, certain client-side directives require special handling. The compiler adds optimization markers to static directives. Some directives are simplified into more straightforward expressions during compilation. When directives affect DOM structure, the compiler ensures proper scoped style application. Different platforms may have varying support for directives, prompting the compiler to perform conversions. In TypeScript environments, directive parameter type safety must be ensured. The compiler also caches and optimizes frequently used directive patterns.
Read more
In Vue 3's source code, static analysis techniques are widely used to optimize performance. The template compiler employs regular expression matching and AST transformations to identify static and dynamic nodes, generating optimized code for static nodes to skip the diff process. During the initialization of the reactivity system, static analysis of object properties establishes precise dependency relationships, resulting in significant performance improvements compared to Vue 2. The type system serves as a static analysis tool to catch type errors during the compilation phase. The compiler also performs optimizations like static hoisting, patch flags, and tree structure flattening. Custom directives and Tree Shaking also benefit from static analysis. During debugging, the compiler API can be used to inspect the results. Compared to React, Vue 3's static analysis is more thorough, identifying more optimization opportunities. Future developments may focus on finer-grained optimizations and cross-component analysis.
Read more
In the code generation phase, the Vue 3 compiler transforms the template AST into executable JavaScript render function code. The code generator generates corresponding code snippets based on node types—for example, a simple `div` element is converted into a `createVNode` call, static nodes are hoisted for optimization to avoid repeated creation, event handlers are cached for optimization, and slots are generated with contextual information. Conditional rendering is converted into ternary expressions, list rendering generates array `map` operations, and component generation handles props and custom events. Static and dynamic attributes are merged, while custom directives generate complete directive information. The generated function includes a prefix, body, and suffix structure. Key functions in the source code handle different node types, with performance optimizations such as static hoisting, event caching, and block marking. In development environments, source maps are generated for debugging. Server-side rendering receives special treatment, and the generator's design supports plugin extensibility.
Read more
The transformation phase in Vue 3's compilation process, located between parsing and code generation, is responsible for various processing and optimizations of the AST and is the most complex part. This phase first recursively traverses the AST tree, applying corresponding transformation functions to each node. Key optimizations include: - **Static hoisting**: Lifts static content outside the render function to avoid repeated creation. - **Patch flags**: Help the runtime efficiently update the DOM by marking dynamic nodes and identifying which parts need comparison. - **Event handler caching**: Avoids unnecessary re-renders by caching event handlers. - **Block handling**: Divides the template into dynamic and static regions. - **Custom directive conversion**: Transforms custom directives into runtime directive objects. - **Slot content conversion**: Converts slot content into slot functions. - **Static type inference**: Analyzes expression types to generate more optimized code. The transformation logic consists of multiple sub-transformers, following a modular design for easier independent development and testing.
Read more
The Vue 3 template compiler converts template strings into an Abstract Syntax Tree (AST), which serves as a tree-like representation of the source code. AST nodes are the fundamental units that compose this tree and are primarily categorized into root nodes, element nodes, text nodes, interpolation nodes, attribute nodes, and directive nodes. All nodes inherit from a base node interface, which includes common properties such as type and location information. Element nodes are the most complex node type, containing information such as the tag name, an array of attributes, and child nodes. Attribute nodes describe element characteristics, while directive nodes handle special attributes prefixed with `v-`. Expression nodes are used to parse expressions within directives and interpolations. Vue 3 also supports compound expressions, such as template literals and chained calls. AST nodes include static markers for compiler optimization. Nodes are created via factory functions and undergo multiple transformations during the compilation process. Special syntax like `v-for` and `v-slot` generates unique node structures. A `SourceLocation` object records the precise position information of a node within the source string.
Read more
Vue3 template parsing converts template strings into render functions through three stages: parsing, transformation, and code generation. In the parsing stage, lexical and syntactic analysis transforms the template into AST nodes, including element nodes, text nodes, etc. The transformation stage optimizes the AST with static hoisting, PatchFlag marking, and other enhancements. The code generation stage produces executable render functions based on the AST. Vue3 introduces multiple compile-time optimizations, such as Block Tree and static hoisting, improving runtime performance. The compiler adopts a modular design, delivering faster parsing speeds and a smaller runtime compared to Vue2, while supporting custom extensions and error handling. Developers can inspect the AST and generated render functions using debugging tools.
Read more
In Vue 3, a block is a core data structure formed after template compilation, representing an updatable unit for optimizing rendering performance. Blocks are categorized into root blocks, regular blocks, and fragment blocks. During the compilation phase, dynamic nodes are analyzed and marked, and dynamic child nodes are collected to generate the block structure. Blocks are closely associated with PatchFlags, using bitwise operations to determine update behavior. The dynamic child node collection mechanism efficiently manages nodes containing dynamic bindings. During the rendering phase, the block structure enables differential updates, reducing DOM operations. Blocks work in tandem with static hoisting, lifting static content into constants. During component updates, precise updates are achieved by comparing the dynamic child node arrays of old and new blocks. Teleport and Suspense components have special handling for blocks. In SSR, block behavior is simplified but maintains structural consistency. Properly organizing template structures can optimize block performance. Custom renderers need to implement block processing interfaces. The compiler determines the optimal block structure through static analysis. Blocks are ultimately converted into virtual nodes, but their responsibilities differ: blocks focus on optimization, while virtual nodes describe rendering content.
Read more
