This setVUE3The study notes have not officially entered the rhythm yet
The official tutorial is very detailed and very good, but there is a problem, that is, there is no way to start. Following the official website documentation step by step, you can reproduce various effects, but in the actual development process, all the friends take it.Build Tools VUECLI or Vite and other things come out directly, and the projects that go out directly are allSFCSingle fileComponentsDeveloped in form.
In the tutorial, there is no mention of single-file component development, and it is placed in the back-end part of the document, which causes the learning and production of Vue3 to be disconnected. I learned a lot of knowledge but still couldn't start.
I understand many truths but still can’t live a good life. . . .
So I decided to start directly from SFC mode and re-simplify the key nodes of Vue3's documentation
The simple SFC mode isVue2It has been used in the middle (I don’t know if VUE has woken up early, and I haven’t contacted it). What’s even more terrifying in VUE3 is that Setup is also introduced. This has caused many of the original Vue2 students to be confused but able to work to fall into a deeper confusion.
This is because many Vue APIs are different in setup and ordinary SFC. Programmers like me who are not always immersed in the front-end field and have not paid attention to the development of this field for a long time, which leads to a lot of conceptual confusion, and ultimately leading to the inability to introduce Vue3 into actual projects.
Let's summarize some necessary knowledge points
To put it seriously: Vue3's upgrade is mainly to provide a script tag with setup properties
The effect of this move has almost completely subverted the development method of Vue2 that I learned before. However, its essential development logic and way of thinking have not changed much.
What are you talking about whether it is Vue2 or Vue3Two-way binding，Virtual DOMFor developers, it is good to know these concepts, but the points that should be paid more attention to areComponentsComponent concept,Components are the core of Vue。
There is also a saying on the Internet that Vue3 is the way, this isLinuxEverything is a file JS Everything is an object A variant of these statements, a word game. For Vue3 itself, this statement is not wrong, but it makes no sense. Which library is not like this? The library itself is a method to provide externally. Without a method, what is the meaning of the library? What we really need to pay attention to is the use of Vue3. For the use of Vue3, it is actually to constantly create various Components, and then build a page that can complete certain functions by continuously importing the Component we created. The various methods provided by Vue itself are to serve these numerous Components.
For developers, Vue3's support for Component is divided into two parts, one is data and one is Dom. Because what developers really need to care about is nothing more than the input, calculation and output of data, and the DOM part is the control of output display. Nothing else. This is also the origin of concepts such as MVVM, CVM, etc. As for computers, their essence is input, calculation, and output. It's over, no more. All methods of Vue are based on data input, calculation and output.
The so-called control of virtual DOM output, responsive two-way binding, etc. are all associated with the output of the data, and in the API documentinstructionThe part is completely aimed at the output level. You must first have these concepts in your mind, and then learn Vue or even other languages, libraries, etc., so that you can get twice the result with half the effort, right?
The final plan
Starting from the next article, I will follow the official tutorial of Vue3, combined with the official API documentation, according toScript setup lang='ts' Let’s record the practical application.