preamble
It's well known that vue offers a lot of black magic, such as single file components (SFCs), directives, and macro functions,css scopedetc. These are the out-of-the-box features provided by vue, have you ever wondered some queries when you usually use these black magic.
-
The vue code we write every day is usually written in the
*.vuefile, but the browser only recognizes file types such as html, css, and js, obviously not*.vuefile, we wrote the*.vueHow does the file work in the browser? -
vue provides a lot of directives, such as the commonly used
v-modelSyntax Sugar Directive, so do you know what this so-called Syntax Sugar Directive actually is? -
The documentation says that macros don't need to be
importIf you import it, won't you get an error if there's no place to define the function when you run it? -
there are
css scopedHow is style isolation achieved?
Having said that I have to recommend an open source ebook:vue3 Compilation Principles RevealedThe answers to these questions are all in this e-book. The answers to all of the above questions are in this eBook, and what's even more remarkable is that this book is familiar and easy to understand to the middle school level front end.The core idea of this book is to take you through debugging to figure out the black magic of compilation in vue3.
Ebook Address:/
Is there a fee?
First of all to answer the question that's on everyone's mind the most, this bookvue3 Compilation Principles RevealedDo you charge for open source ebooks?
Since it's all open source, of course it's free.Just one star from youGitHub address:/iamouyang21/vue3-compiler 。
And there is a companion vue source code group, the group is also no charge.
What can I learn from this book?
vue because of the gentle learning curve, students with experience using other frameworks, basically spend half a day, read the documentation can get started directly.
The reason why it's so good to get started is because vue provides a lot of black magic, such as single file components (SFC), directives, macro functions, css scoped, and so on. We can easily get started with a vue project by just following the official documentation.
It is also because vue internal encapsulation of too many APIs, resulting in a lot of students have been stuck in the technical level will only use the API, which is often referred to as "know the reason why but not why (idiom); not recognized for what it is". Sometimes when you meet some particularly complex requirements, it is very difficult to realize them with the current level of technology.
This book can break you out of your current rut:The skill level has been stuck in just using the API.. Reading this book can give you a qualitative improvement in your knowledge of vue compilation, and because it is very detailed. As detailed asdebugEvery step of the source code is written out, you can completely follow the steps of this book to debug read the source code yourself. So this book not only teaches you the knowledge of vue compilation principles, but also teaches you how to read the source code by debugging it yourself.
That's it?
No, after reading this book you can also go ahead and pretend to be X in a job interview.
If you are a candidateWhile other candidates are still chatting with interviewers about crappyvue responsive principlesWhen you came up, you were different from the others, talking directly to the mysterious-lookingvue compilation principleThis can certainly add up to a lot of points in an interview.
If you're the interviewer.Sometimes we meet someProficient in vueThe candidates are either "really proficient" or "fake proficient" in some common vue source code articles. Some of these candidates are "really proficient", while others are "fake proficient" having read some common vue source code articles. This is where you can test the candidates with questions on vue compilation principles.
What are some of the things this book is about?
The book is divided into 4 major chapters:
-
The first chapter is to teach you how to view the source code, and the whole process of how a vue file is compiled into a js file.
-
The second section is to take you through the process of figuring out how compile time handles the
templatemodule and how it will eventually be generatedrenderfunction.
-
The third section is to take you through the process of figuring out how compile time handles the
scriptmodule and how some common macro functions are handled.
-
Section 4 is to take you through the process of figuring out how compile time handles
stylemodule and how to implement thecss scoped。
ultimate
vue3 Compilation Principles RevealedThe ebook is completely free and there is a companion vue source code group, and the group is also no charge.Just one star from you。
GitHub Address:/iamouyang21/vue3-compiler
Ebook Address:/