Article directory
Life cycle (important)
It is enough to understand the life cycle of this text version, the main thing is to know what the whole life cycle process looks like
Teacher coderwhy wrote all the functions of the life cycle by hand, and demonstrated it, it is still very clear, you can look at the code.
It is best to write all the functions of the life cycle by yourself, which will be clearer
ref: get the actual DOM (grasp)
If we need to get the native DOM in some development scenarios, we can’t use queryselector. Vue provides the ref attribute to help us get the native DOM. We just need to write ref="name" on the corresponding element . You can get the corresponding native dom through $refs.name!
If it is written on the component, then **$refs. The name gets the component object**
Here is a concept:
a component is actually a class ref in the component is the instantiation generated by this component (class) object. Vue uses objects to implement functions similar to classes in practice, but react is different. React uses classes.
In fact, a component is a class. When a child component is called in a parent component, an instantiated object is created by using the child component template, and different parameters are passed in to obtain different instantiated objects. Isn’t this the same as creating different objects for a class?
are common design patterns
ref gets the component instance, and can directly call the method in the component.
Multiple roots get the first node node,
so it is best to have only one root in a component in development, and put other things in the root, so as to maintain the most convenient time
Dynamic components (component)
Although the teacher wrote to understand, but I think it is quite useful.
In addition to using logic judgments such as v-if and v-else-if, dynamic display components can also use dynamic components
:is - dynamic binding is='component name' case-insensitive
dynamic components can also implement all functions of passing in parameters and listening to events
keep-alive (understanding)
Generally speaking, when we switch components, the components will be destroyed. Using the life cycle function here can also clearly see that the home is indeed destroyed after being switched.
If the switching is more frequent, the overhead will be relatively large, and the previously saved data will disappear, and will disappear when switching back again. So at this time, it is very necessary to keep-alive
to essentially make a cache.
The name of the include is a custom name written in the subcomponent, not the component name, but it is more convenient to write the component name when it can be written
webpack subpackage processing (understanding)
The import function allows webpack to perform subpackage processing, because it returns a promise
asynchronous component
To package a certain component separately, it is required to put a component object in the component, so use the defineAsyncCompoonent provided by vue, which returns an asynchronous component. Use this function to import the component, and this component will be packaged separately when packaging
. a js file
Use v-model on components (advanced usage)
Some things may not be used in development all the time. These are advanced usages. The most important thing is to master the basics.
There is nothing complicated, it is still two-way binding in essence, but because it is data binding between components, communication between components is needed, and some communication between components needs to be written on the sub-components bound by v-model Things, such as props and emits,
the default bound parameter name and event name of v-model is modelValue,
where @input means that the bound input event is triggered when the input table has input input, just like @click is bound to click event.
v-model does two things, one is to pass parameters, the other is to listen to events, which is similar to the input before, but now it is communication between components, so there are still some things such as emits, etc. in the components that use v-model write well!
bind multiple properties
Change the default event name and parameter name, you can use v-model to bind multiple attributes
Mixin (understand)
This is used more in vue2, but it is less used in vue3
because although mixins provide this kind of state reuse capability, it has too many disadvantages . So the hooks were introduced later
Disadvantage 1: Untraceable methods and attributes (because it has the principle of merging)
Disadvantage 2: Overwriting, same name
How to use: mixins: [sayHelloMixin] 
global use is less
Summarize
The nested use of components is very important.
Child-to-father and father-to-son are very important. Exercises must be done. Slots must
also be known and must be mastered .
Scope slot understanding
Life cycle is very important, especially created and mounted
