Vue.js, as the Data-driven front-end framework, stands out as one of the mainstream choices for front-end developers. This book provides a detailed introduction of Vue.js framework design principles, including an overview of framework design, response systems, renderers, componentization, compilers, and server-side rendering. Based on Vue.js 3 and strict compliance with the specifications, this book starts from source code with a large number of visual diagrams combined, explaining the implementation of each functional module in Vue.js step by step.
By reading this book, developers with hands-on experience with Vue.js 2/3 will be able to further understand the implementation details of Vue.js framework, while front-end developers who are not experienced in vue.js but interested in framework design can quickly grasp the design principle of vue.js.
Author(s): HcySun Yang
Edition: 1
Publisher: Springer Singapore
Year: 2023
Language: English
Pages: xvii; 574
City: Singapore
Tags: Computer Science; Web Development; Professional Computing; Programming Techniques; User Interfaces and Human Computer Interaction; Computer Applications
Foreword
Preface
Target Audience
The Content
The Structure
Source Code and Errata
Acknowledgment
Contents
Part I: Overview of Framework Design
Chapter 1: Art of Trade-Offs
1.1 Imperative and Declarative
1.2 Trade-Offs Between Performance and Maintainability
1.3 How Does the Virtual DOM Perform?
1.4 Run Time and Compile Time
1.5 Summary
Chapter 2: Core Elements of Framework Design
2.1 Improving User Experience in Development
2.2 Controlling the Volume of the Framework Code
2.3 Frameworks Need Good Tree-Shaking
2.4 What Kind of Bundle Should Frameworks Output
2.5 Feature Switches
2.6 Error Handling
2.7 Excellent TypeScript Support
2.8 Summary
Chapter 3: Design Patterns of Vue.js 3
3.1 Describing UI Declaratively
3.2 Getting to Know Renderers
3.3 Essence of Components
3.4 Working Principle of Templates
3.5 Vue.js Is an Organic Whole Composed of Various Modules
3.6 Summary
Part II: Response System
Chapter 4: The Role and Implementation of Response System
4.1 Responsive Data and Side Effect Functions
4.2 Basic Implementation of Responsive Data
4.3 Designing a Perfect Response System
4.4 Branch Switching and Cleanup
4.5 Nested Effects and Effect Stacks
4.6 Avoiding Infinite Recursive Loops
4.7 Scheduling Execution
4.8 Computation Attributes Computed and Lazy
4.9 Implementation Principles of Watch
4.10 Immediate Watch and Callback Execution Timing
4.11 Side Effects of Expiration
4.12 Summary
Chapter 5: Responsive Schemes for Non-original Values
5.1 Understanding Proxy and Reflect
5.2 How JavaScript Objects and Proxy Work
5.3 How to Proxy Objects
5.4 Reasonable Response Trigger
5.5 Shallow Response VS Deep Response
5.6 Read-Only and Shallow Read-Only
5.7 Proxy Arrays
5.7.1 Index and Length of Arrays
5.7.2 Traversal of Arrays
5.7.3 Array Search Method
5.7.4 Prototype Method for Implicitly Modifying Array Length
5.8 Proxies Set and Map
5.8.1 How to Proxy Set and Map
5.8.2 Establishing Responsive Linkages
5.8.3 Avoiding Contaminating the Original Data Source
5.8.4 Handling forEach
5.8.5 Iterator Methods
5.8.6 Values and Keys Methods
5.9 Summary
Chapter 6: Responsive Schemes for Raw Values
6.1 Introducing the Concept of Ref
6.2 Response Loss Problems
6.3 Automatic Ref Removal
6.4 Summary
Part III: Renderers
Chapter 7: Renderer Design
7.1 Integration of Renderers and Response System
7.2 Fundamentals of Renderers
7.3 Custom Renderers
7.4 Summary
Chapter 8: Mount and Update
8.1 Mounting Properties of Sub-Nodes and Elements
8.2 HTML Attributes and DOM Properties
8.3 Setting Element Properties Correctly
8.4 Class Processing
8.5 Unloading Operations
8.6 Distinguishing the Type of Vnode
8.7 Handling of Events
8.8 Event Bubbling and Update Timing Issues
8.9 Updating Sub-nodes
8.10 Text Nodes and Comment Nodes
8.11 Fragment
8.12 Summary
Chapter 9: Simple Diff Algorithms
9.1 Reducing Performance Overhead for DOM Operations
9.2 DOM Replication and the Role of Key
9.3 Finding the Elements that Need to Be Moved
9.4 How to Move Elements
9.5 Adding New Elements
9.6 Removing Non-existent Elements
9.7 Summary
Chapter 10: Double-Ended Diff Algorithms
10.1 Principles of Double-Ended Comparison
10.2 Advantages of Double-Ended Comparison
10.3 Treatment of Non-ideal Conditions
10.4 Adding New Elements
10.5 Removing Non-existent Elements
10.6 Summary
Chapter 11: Fast Diff Algorithms
11.1 Same Precondition and Postcondition Elements
11.2 Determining Whether DOM Movement Operation Is Required
11.3 How to Move Elements
11.4 Summary
Part IV: Componentization
Chapter 12: Implementation Principles of Components
12.1 Rendering Components
12.2 Component Status and Self-Updating
12.3 Component Instances and Component Lifetime
12.4 Passive Update of Props and Components
12.5 The Role and Implementation of Setup Functions
12.6 Implementation of Component Events and Emit
12.7 Working Principles and Implementation of Slots
12.8 Registration Lifetime
12.9 Summary
Chapter 13: Asynchronous Components and Functional Components
13.1 Problems to Be Solved by Asynchronous Components
13.2 Implementation Principles of Asynchronous Components
13.2.1 Encapsulation of DefineAsyncComponent Function
13.2.2 Timeout and Error Components
13.2.3 Delay and Loading Components
13.2.4 Retry Mechanism
13.3 Functional Components
13.4 Summary
Chapter 14: Built-In Components and Modules
14.1 Implementation Principles of KeepAlive Component
14.1.1 Activation and Deactivation of Components
14.1.2 Include and Exclude
14.1.3 Cache Management
14.2 Implementation Principles of Teleport Components
14.2.1 Problems to Be Solved by Teleport Components
14.2.2 Implementing Teleport Components
14.3 Implementation Principles of Transition Components
14.3.1 Transition of Native DOM
14.3.2 Implementation of Transition Components
14.4 Summary
Part V: Compilers
Chapter 15: Overview of Core Technologies of Compilers
15.1 Compilers for Template DSL
15.2 Implementation Principles of Parsers and Finite-State Machines
15.3 Constructing AST
15.4 AST Transformation and Plug-In Architecture
15.4.1 Access to Nodes
15.4.2 Conversion and Node Operations
15.4.3 Entry and Exit
15.5 Converting Template AST to JavaScript AST
15.6 Code Generation
15.7 Summary
Chapter 16: Parsers
16.1 Text Patterns and Their Impact on Parsers
16.2 Recursive Descent Algorithm Construction Template AST
16.3 Start and Stop of Finite-State Machines
16.4 Parsing Label Nodes
16.5 Parsing Attributes
16.6 Parsing Text and Decoding HTML Entities
16.6.1 Parsing Text
16.6.2 Decode Named Character References
16.6.3 Decode Numeric Character References
16.7 Analytic Interpolation and Annotation
16.8 Summary
Chapter 17: Compilation Optimization
17.1 Dynamic Node Collection and Patch Flags
17.1.1 Problems of Traditional Diff Algorithms
17.1.2 Block and PatchFlags
17.1.3 Collecting Dynamic Nodes
17.1.4 Runtime Support for Renderers
17.2 Block Trees
17.2.1 Nodes with V-if Instructions
17.2.2 Nodes with V-for Instructions
17.2.3 Fragment Stability
17.3 Static Lifting
17.4 Pre-stringing
17.5 Caching Inline Event Handlers
17.6 V-once
17.7 Summary
Part VI: Server-Side Rendering
Chapter 18: Isomorphic Rendering
18.1 CSR, SSR, and Isomorphic Rendering
18.2 Rendering Virtual DOM as HTML Strings
18.3 Rendering Components as HTML Strings
18.4 Principles of Client-Side Activation
18.5 Writing Isomorphic Code
18.5.1 Component Lifetime
18.5.2 Using Cross-Platform APIs
18.5.3 Introducing Modules Only at One End
18.5.4 Avoiding State Contamination Caused by Cross Requests
18.5.5 < ClientOnly > Components
18.6 Summary
