What should I do if my code gets messier with the Composition API?

preamble

Composition API One of the main features of the project is that it is "very flexible", but because it is so flexible, every developer has their own ideas. In addition, the continuous iteration of the project led to our code becomes more and more chaotic, and eventually reached the point of no maintenance. This article is a summary of some of my experience in the use of composite APIs in the past few years, and I hope that this article will enable you to also writeeasy maintenance、classy(used form a nominal expression)Combined APICode.

Ouyang wrote an open source ebookvue3 Compilation Principles Revealed, this book is accessible to middle school level front end. Totally free, just asking for a STAR.

Options API

vue2's option-based API because each option has a fixed place to be written (e.g., data goes in thedataInside, the methods are placed in themethods(inside), so we just need to put the code in the corresponding option.

The advantage is because it has been fixed where each code is written, and everyone writes it in a similar style.

The disadvantage is that when the logic of a single component is complex to a certain degree, the code can be particularly bulky and very inflexible.

Feel free to write combinatorial APIs

vue3 has introduced theComposition API, his main feature is very flexible. Solve the problem of option API is not flexible enough. But flexibility is also a double-edged sword, because each developer's coding level is different. So there are people who use a combination of (Composition) API to write out the code is very beautiful and easy to maintain, some people write the code is really very confusing and difficult to maintain.

Let's say a component starts out or is written in a regular way, with all therefresponsive variables in one piece, all the methods in one piece, all thecomputedComputational properties are put in one piece.

But as the project continues to iterate , or simply a new person to maintain. At this point the code may not be as clear as it was at the beginning, such as the newly added code whether it isref、computedOr is the method all put together. As shown below:

only ifcount1cap (a poem)count2When the code looked pretty neat. But with thecount3It looks messy when the code is added, and subsequently if you add thecount4The code would be even more messy.

Write combinatorial APIs in an organized manner

To solve the above problem, so we agreed on a code specification. The code for the same API is all written in one place, for example all thepropsPut it in one piece, all of it.emitsPut it in one piece, all of it.computedPut it in one piece. And the code of these modules are written in an agreed order, as shown below:

With the increase in code for the vue component, there is a new problem with the above scenario.

Still the same example as before say there are 5count(used form a nominal expression)refvariable that corresponds to thecomputedcap (a poem)methodsThere are also 5 of them. At this point we have a lot of vue component code, for example at this point I want to look at thecomputed1cap (a poem)increment1What is the logic of the

on account ofcomputed1cap (a poem)increment1functions in the file'scomputedcap (a poem)methodsat the code block of thecomputed1cap (a poem)increment1There are a few dozen lines of code separating them, and after readingcomputed1code before jumping to theincrement1The code for this is a pain. As shown below:

At this point, some of my buddies will say that the drawbackhooksChant. Here's five.countThen draw five.hooksFile. Code like this. As shown below:

Generally the extractedhooksare used for logic sharing across multiple components, but here we've extracted theuserCountThe file is obviously only used by this vue component. This doesn't serve the purpose of logic sharing, so the logic is extracted into a separate file nameduserCount(used form a nominal expression)hooksAgain, the document is a bit out of place.

Final Solution

Why don't we blend the previous scenarios a bit and extract multipleuseCountfunction inside the current vue component, rather than pumping it into a singlehooksfile. And there is no need to create a new file in more than oneuseCountIn the function we still follow the previously agreed upon specifications and write them in orderrefVariables,computed, the code for the function.

The resulting best practice is shown below:

There are several advantages to this writing style above:

• We put eachcountlogic are extracted into separateuseCountfunctions, and they are all in the current vue file without extracting them into thehooksDocumentation. If somedayuseCount1The logic in this component needs to be available to other components, we just need to create a newuseCountfile, and then directly replace theuseCount1Just move the code for the function to the newly created file.

• If we want to check thedoubleCount1cap (a poem)increment1The logic in theuseCount1function on thecount1The relevant logic is inside this function, eliminating the need to traverse dozens of lines of code to get from thedoubleCount1code jumps to theincrement1of the code.

summarize

This article describes the use ofComposition APIof best practices, the rules are as follows:

• Having first agreed on a code specification thatComposition APIWrite them in the agreed order (the order of writing can be adjusted appropriately according to the company's code specification). And the code of the same combinatorial API is all written in one place, for example, all thepropsPut it in one piece, all of it.emitsPut it in one piece, all of it.computedPut it in one piece.

• If the logic can be reused by multiple components it is extracted into separatehooksDocumentation.

• If the logic cannot be reused for multiple components, extract the logic into theuseXXXfunction, which sets theuseXXXThe code for the function is still placed in the current component.

  The first benefit is that if somedayuseXXXThe logic in the function needs to be reused for other components, we just need to set theuseXXXThe code for the function is moved to the newly createdhooksfile is sufficient.

  The second benefit is that we want to view the code for a particular piece of business logic, we just need to add a new line to the correspondinguseXXXfunction to find it. No need to trawl through the entire vue file to find the function from thecomputedThe code of the module jumps to thefunctionThe code for the function.

Follow the public number: [Front-end Ouyang], give yourself a chance to advance vue

Also Ouyang wrote an open source ebookvue3 Compilation Principles Revealed, this book is accessible to middle school level front end. Totally free, just asking for a STAR.