Vuejs: Refactoring code is clean

Tram Ho

Vuejs is a great framework, it gives us the ability to create complex websites but the way to do it is simple.

Although I have used Vue quite a lot, I still have not really taken advantage of this power of Vue, sometimes my Vue code is too long, too complicated to make myself unable to smell it when I read it again. , with components up to 300 lines of @@ code

After a long time, I finally tried to learn how to refactor the easy-to-read code, remove the excess to increase the performance for the project, here are some ways that I can collect and find out in myself. course to work with Vue.

Let’s first take a look at the actual example that we will refactor:

This component has the task of rendering a list of articles in preview format so that users can click to read, it is very simple. Looking at it, this component is still quite confusing, it is simple, but there are some components that have the form with all the processing tasks to reach 300 lines of code. Come on ?

Now we will re-refactor it, maybe my way is not the best, so I hope to receive comments in the comment section (bow).

1. Use Import Components effectively

On the first line of Import, you can see that you are using webpack alias to perform import component RwvArticleMeta , the @ character here replaces the root path of the project to the component you need. Very short but not really effective, because when you need to switch from webpack to another bundler module, it is possible, the new module does not support this path.

In fact, I have encountered this situation when I implemented a small Vue project, I initially used Nuxt.js to code, it was ok, but when I submitted it to the leader, the leader, he wanted to transfer it to a simple Vue template. because the project does not need SSR. I brought it back and cut all components to a new location, but when rendering, the error was peculiar because the new Vue template does not use webpack so it does not support express path @ .

And so I had to change it all like this:

2. Arrange the properties of Components

This is very small, that is according to the document of Vue, we will arrange to declare the props after components , but according to me, we should put the props behind, because usually we will use the props in methods, watch hoặc computed so it is easy to see, it doesn’t have to be pulled up much, but nothing: v

3. PascalCase Components

Another simple little thing that I did a lot was that instead of writing a component in HTML, switch to PascalCased, this little thing can make a big difference, reducing the reading time of devs. .

When looking at a component with lots of imported components, the dev will be able to immediately glance at which component is used when using PascalCase syntax, especially when reading the code of another friend. I bet it is much more eye-catching than the traditional custom HTML tag

4. Self-close elements

Another small thing can help your code a lot less lengthy. Actively use them unless you really need to put a plain text line in that element

5. Shorten the Props

Sometimes we need to transmit props that are Boolean values, when it doesn’t need to transmit them to true or false values, just put it into the component is okay, if they are placed there, Vue will wear setting the value to true , otherwise false

6. Short parameter transmission

Sometimes you will want to pass on the component side some parameters are Object type, or array type and of course they are quite long, now don’t forget you have a great tool: Computed .

In the example below you can see, the component router-link is passed into a to parameter, it is currently a fairly long object, we will put this entire value into a Computed function articleLink() . Now on your template, articleLink will be treated as a value to use.

7. Put all elements into the HTML tag

In most cases, you should put all your elements in an HTML tag, even if it is plain text. It could be a certain span or div tag, this is for future work, maybe in the future you will need to use if else on that element, or simply need css for plain lines that text.

8. Use v-text instead of mustache syntax

If you read in Vue’s document you won’t see these refactor because it’s a simple trick to help you avoid some unnecessary errors.

Specifically, when you send an HTTP request to retrieve data and dump it into the template as in example 7, if the returned data has no tag value then it is likely that the component will report an undefined error and something that looks odd and influential. bad to the user experience.

To handle this problem, instead of directly dumping data like above, put it in the v-text directive, this problem can be solved. Moreover, with this trick, you will be able to use the addition of the # 4 trick, self-close as well as this HTML tag, the code will look pretty neat.

9. Extract Components

When you see that there are several components in the component over and over again, you should think about splitting them into a component child to reuse, avoid repeating unnecessary code and if there is any change it will just need to be changed. change in one place.

It was in the first introduction that I had this error, due to too much code, I forgot to split the component, causing the code to be capitalized up to 300 lines and many parts were repeated, now for maintenance. It really took too much time, it would be better to beat and rebuild quickly.

In the above example, we can see that we have a li tag added to the loop, so there is no reason for not separating it into a separate component, being reused many times, don’t be lazy to create one. new files that just leave the same as me, later find trouble but can’t fix it ✌️

TagList.vue

Epilogue

There are some basic ways to implement refactoring code that you know in the process of working with Vue. Of course there are many more tricks from basic to advanced, through the work process you will gradually learn for yourself more ways to code cleaner, increase work efficiency.

With some ways to refactor more advanced code, you will probably want to read this article again: Build Vue Components better.

Thank you for following the post!

Share the news now

Source : Viblo