Some tips on VueJS (P1)

I have done many projects on VueJS, and I realize that there are many tricks implemented in VueJS that if I shook hands right from the beginning of the project, everything would be better later. If not later on, I will have to spend more time sitting refactor there. And go to the main content of the parts I want to share only, note that this article is for those of you who already have the basic knowledge of Vue, and those who are new to Vue, I think bookmarking is not necessary to read this article.

Use Vuex before it’s too late

If you are building a medium to large project then I think there will be a lot of resources to manage, not to mention that I will have to work with different data between different components, I think it will be quite is difficult and confusing and somehow your code gets duplicated if you don’t manage it well. Sometimes it also causes bugs because of the dependency between components too much.

So Evan You created Vuex to accompany Vue. Vuex is not needed for a small project or working on little data. But for medium and above projects it is really necessary. Since using Vuex projects, I feel less headache

Understand the component a bit

Static Components

From Vue 2 we can use so-called static components. Its advantages are fast and light. These components usually have no state or internal data and are usually displayed only once. This allows such functional components to be extremely fast. To use this feature, you can use v-once in the cards you want to display once.

Potential Confusion

At beginner vue themselves known within one component alone will define the attributes in the data , the properties calculated in computed and methods in the methods and times to call these things we only need this . Sometimes I wonder if sometimes it gets confused like this instead of this.methods or this.property is not this.type.thing ( this.methods.methodName )

Actually everything I define in that component is simply at the Định nghĩa level and actually things that run in those attribute methods Vue reassemble the data , methods , computed , etc. ….. v in another component already. And for convenience, it all maps to the component’s root

Rerender Component

Occasionally we will need to re-render our component: -? And think about how you would do it a little bit? I will list the ways for you to do that

• Reload page =)))))) (Worst way)
• Using Hack v-if (The worst way)
• Using ForceUpdate (Good way)
• Change the value of the key (The best way)

Reload page ??

Ok this means you need to restart your computer every time you want to close an application. I personally think it will work =)))) However it’s a pretty bad solution. There’s really not much to say about this. Do not do that. No No

HACK V-IF

The Vue that comes with v-if will display the component when it’s true . If it is false , the element will not exist at all in the DOM. The following example is how to use v-if to rerender.

And in the script we will have nextTick =))

And what happens in the code above?

• The first isRender is set to true , so my-component is displayed
• When I call forceRerender, I immediately set isRender to false
• my-component is now removed on the DOM because v-if is now false
• When running to nextTick (you do not know about nextTick can refer to this article Vue Nextick ), I will reset to true
• This time v-if has a value of true so it will re my-component render my-component

There are two important things I want you to know about

• Firstly, that is we have to wait for nextTick
• Secondly, Vue will create a whole new component when we render it again the second time. Vue will destroy the first component and create a new one ???? What does that mean? Oh right =))) That means my-component will go through all of its life cycles. Actually, in my opinion this is not a good solution or I call it HACK V-IF because this way we are hacking around what Vue wants us to do. So hãy làm những gì vue muốn chúng ta làm

Force Update

This is one of the two best ways to solve this problem, and both are recommended by Vue =)))))) Vue will usually update itself on Vue if there is a change, and when we call forceUpdate we can make it update again

…

Vue automatically updated when everything changed then why do we force Update ???? The reason is because sometimes the reactivity system of vue it does not work offline =)))) Better understand you can read This article So if you need to update the component using this method will be better than the above 2 ways = )))) Note: forceUpdate it only updates the view only: -? See more about it

KEY – Best solution

This is the best of all. I will assign a key attribute to a component so Vue knows that a component is tied to a specific piece of data. If the key stays the same, it doesn’t change the component, but if the key changes, Vue knows that it will delete the old component and create a new component. =))) Exactly what we need But first we need to talk a little bit about Key and why are we using it

I assume we use v-for to load an array of objects. If we sort that array or fix it in any way, we need to rerender that list. But you don’t want to re-render everything related to that list, but just the things that change

In order for Vue to know what has changed and what has not, I will insert the key attribute using the index

And we use v-for in combination with the key index

Now for example, I will delete Van B output will be

Van C ‘s index has been changed, although Van C is still the same object, but the problem is that Van C ‘s index has changed and will be re-rendered. So here we need a unique id that’s like this

In the example using the above index when we delete Van B Vue will delete Van B , Van C and re-render another Van C When we use the unique id now Vue knows that it can be between Nguyen Van A and Van C just delete Van B

It is very optimized right? Finally, it is to use the key to rerender component

OK Done =)))) Above is the best way, right

Multiple Root Node

I guess you will sometimes encounter an error called Đéo tìm thấy node cha =))) when compile Like this

And we will fix by adding a div tag

If it does not matter, it is okay but in many cases I should not have a root node or na I need many root nodes =)) (like css, table) and so on. There is a solution: -? (Vue 3 seems to be ok then skip to Vue 2 then stick huhu) Like React will have React Fragment

Ok so VUE What do we got vue-fragment =)))

Validate data easily with Vuelidate

There have been projects that I work on, which only work with forms, and validating data is extremely necessary (Both server and client). And there is a pretty good library that I really like is Vuelidate. This is very recommended for me because if I validate by hand at the time I see the form & the logic is very simple. )))) You can refer to the sample validate here

Use events rather than callbacks

When we work with father and son components, there will be places that need data interaction between the father and the child and vice versa. There are two common ways we do it

• Use callback functions in props
• Using events Here I do not compare the differences between the 2 guys but I personally prefer using events over 2 reasons
• It is a clear separation between “what the child component receives” and “what the child component sends to the parent component”.
• I see standard in the examples and Vue documents, most of them use events to interact from child components to the father

An example of using Callbacks and Events is as follows:

Above is the direction to use callbacks and below is the use of events

Reuse transitions

Transitions in vue is something that I really like because of its simple use and nice effects The simplest way to use can be mentioned in the following example.

However, if I write like this, then I’m hard to reuse, maybe I will have to write everywhere like that, it’s very tiring. Here I will encapsulated this transition into a component like this.