This article pompous class title “waste! Vue3 source code are not, also dare to go to the front end of the headlines interview?
Vue. Js Design and Implementation
Today, I recommend a book that I think needs to be read in 2022 for front-end advancement. It is from the new book “Vue.js Design and Implementation” by Huo Chunyang, a member of the official Vue team.
Long ago when I was with ChunYang face will know that he is writing a book about Vue3 principle, eat hot pot together know he finished last month, hurriedly cheek to a book signing edition copies, and exalted premium labels, a night to read right away after the arrival of the goods yesterday, this morning after watching the wrote, the world’s first review, why is starting? After all, the author of this book didn’t get an advance copy.
Introduce the Vue framework
Vuejs is one of the most popular front-end frameworks in China, which can encapsulate an ordinary data as responsive data, and automatically notify the page update after data modification. Developers only need to pay attention to the data, which is very friendly to beginners. In addition to responsive system, there are componentization, virtual Dom, single file component, Vue has recently changed the default version to Vue3, which is a comprehensive upgrade of Vue2. The following figure shows the new features of Vue3, all using Typescript refactoring. With the new responsive and virtual DOM system, Composition API and custom renderer features, I believe Vue3 will also gradually become popular in 2022, continuing to dominate the domestic front-end ecosystem with React
Now let’s talk about the features of this book
This book is not a primer on Vue3, but an introduction to the design philosophy and interpretation of Vue3 as a whole. While interpreting the source code, it gives you a higher perspective and dimension to understand the framework. Now Vue3 has become the default version of VUE, and in 2022 Vue3 will become more and more popular. This book should definitely be included in the front end engineer’s must-read in 2022. There was a vue2 source code interpretation book “Simple vue.js”, now you can directly look at the Vue3 source book
The book consists of six chapters, 18 chapters and 501 pages devoted to Vue3 principles and design concepts
The first three chapters mainly introduce the design concept of the framework. Firstly, it introduces the trade-offs between imperative, declarative, virtual DOM, runtime and compile time in the front-end framework, and then introduces the factors that need to be considered in the design of the front-end framework, such as volume, development experience, feature switch, error handling, etc. Finally, it introduces the design and tradeoff of vue.js in these concepts. After reading the first chapter, it is not a problem to chat and laugh with the interviewer, but if you are asked for details, you need to strengthen the following chapter. The following figure shows the dependency of the most core modules of Vue
In the second chapter, there are three chapters on the responsive system. One of the biggest features of Vue is the responsive system, which is a perennial interview question for all major interviewers. There are a lot of articles on the interpretation of the responsive principle in the community. First of all, besides the main process of Proxy Proxy data in the responsive system, how to clean Proxy, nesting effect function, implementation of computed and watch, and race problems of expired side effects are analyzed. Besides, details about Proxy in Javascript specification files are also analyzed. Through the definition of the specification to introduce how to proxy obj, set, map and other data structures, this meticulous degree is absolutely worth your collection, finally introduced the original value of the proxy function REF implementation details, although I have seen several times the Vue source code, this response type analysis or let me gain
Third chapter five the renderer to say is how vue based on responsive system, rendering the node to the browser, including the node’s mount and update, node events, such as class attribute update, virtual Dom update logic, detailed introduces the double side diff algorithm, in which you are most interested in the longest increasing subsequence also have detailed graphic analysis, Simple DIff is the algorithm used before React Fiber, double-ended DIff is the algorithm used by VUe2, and fast DIff is the algorithm used by Vue3 now. Thus, we can fully understand the development of virtual Dom technology in Vue and React
Fourth chapter three componentization, vue or react, modular mechanism that we can all like building blocks to develop a web page, the component design is the most important external transfer properties, component exposed outside events, as well as the internal extension, this chapter explains how components rendering in vue, update, and perform logic such as life cycle, And extend the realization principle of asynchronous component and function component, and introduce the principle of built-in components keep-alive, teleport and transition
Taken together, this is all the logic for Vue3 running in the browser
Then there are three compilers in chapter five, including the introduction of compilers and interpreters, including the popular science of state machines, AST and other concepts, and a detailed analysis of the process of how template is turned into render function in VUE. It is also a review of the compilation principle of computer specialized courses. Finally, it explains what kind of compile-time optimization is done in Vue, how to statically mark the virtual DOM through bit operation, so as to improve the performance of Vue runtime as much as possible, as well as block tree, cache function and other optimization methods, we usually do project optimization also provides a good idea
The final chapter covers some of the server-side rendering apis of Vue and how they work. If you are studying server-side rendering of Vue, this section will help you. The main thing is how to generate a string of components in the Node environment to render the first screen, which can be activated in the client. It can be read specifically for those who are interested in SSR
The authors introduce
Huo Chunyang from Vue official team is the second contributor to You Yuxi in terms of Vue3’s contributor, and can be said to be one of the most suitable writers for Vue3’s design concept books. His own experience is also very inspiring. He was an ordinary undergraduate (dropout) and changed to a front end job. And then leaving full-time made open source for a period of time, now with a unicorn company blue lake, and is responsible for maintaining Vue3 framework, is one of the programmers I greatly admire, his growth experience also inspired many front end, and I have about the author of the book next week HuoChunYang recorded a video interview, possibly giving signature book, what you want to ask, welcome to leave a message in the comments section
To summarise This book is good, but if you’re expecting only through reading can become master of source is impossible, you need to download the source vue3 honestly, points module in order to see, and with the React presents comparative, to gradually learning framework design concept, and any book itself is the author’s opinion, In the process of studying the source code, we should dare to question and ask questions, and in the process of debugging the source code to verify gradually digest and this book is mainly about the principle, so we need to cooperate with leetcode in some scenarios to see more efficient, such as 146 LRU cache to help us understand the design of keep-alive cache. Question 136 only appear in order to help us understand the Vue compiler optimization of the bit operation, question 300 longest increasing subsequence to help us understand the virtual DOM diff algorithm, finally we can private I get this Vue3 principle panorama
I wish you all can understand the source code, and in 2022 and the interviewer laugh, by the way, we will see you next time