编程知识 cdmana.com

What I want to say about mixing Vue

Before, in the process of reusing the code of other projects for development , I often encounter mixed writing , Because I didn't do in-depth understanding and detailed research on this function when I studied before , So in the face of mixing when basically confused , So that in the development of the use of mixed place on the muddle .

1. What's mixing in for :
image.png
After reading this introduction, I can only say that I am not sure , What is it and how to use it ...
image.png
This is a sketch ... Indicates that the same data exists in three components , That's the reusable part , And then it's like extracting the common factor , Pull out the same parts of the three components , Write to mix in objects . Next, just use this blend object in each component , Then all the options in the mixed object can be used by this component . It's no use saying more , Code up :
image.png
Redundant code ... Look at the results :
image.png
And then use mix in transformation :
image.png
Look at the results :
image.png
This is the function of blending in , In fact, it can optimize the front-end code very well , Some reusable code will be very refreshing when mixed in , The code won't be so redundant , Refreshed , gladdening the heart and refreshing the mind .

2. Options merge :
(1) The code above is not hard to see , Mixing objects is equivalent to a merge with the code in the component , What happens if there are the same named options or data when merging ?
image.png
Look at the results :
image.png
Component data first , But because it won't make a mistake , So when you use mixed objects , We also need to pay attention to naming , Try not to duplicate names .

(2) What if we combine hook functions ? Combine hook functions into an array , First execute the hook with the same name in the mixed object , Then execute the hook with the same name in the component .
image.png
Look at the results :
image.png
(3) Options for merging values to objects, such as methods、computed etc. , Will be merged into one object , And component first .
image.png
Look at the results :
image.png
because ... therefore ... Try not to duplicate names .

(4) Summary : When merging data and object options , Data components with the same name are preferred ; When combining hooks , The generated array is executed .

3. The whole thing is in : Try not to write the following code ...
image.png
Look at the results :
image.png
Why output one more time ? Because the root instance is also attached to the global hybrid object ... So it's better not to use this thing , Because it affects everyone Vue example .

Is it really useless to mix in the overall situation ? Not at all , Even it's a little bit powerful :
image.png
Look at the results :
image.png
It can be used to customize options , And inject logic , Follow the code :
image.png
Look at the results :
image.png
Although it's a bit like taking off your pants and farting , But the good thing is that it can explain the problem ...

summary : Local mixing can simplify code , But in the use of the need to pay attention to the naming problem , And the rules and priorities of option merging . good , Today is also an employee who works hard to write beautiful code .

版权声明
本文为[Coder_ WangYu]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224152603273y.html

Scroll to Top