Some tips on VueJS (P2)

Tram Ho

Hello everyone , I’ll come back and continue the lesson. Some tips on VueJS (P1) , this article will be part 2.

Passing Multiple Props

I don’t know what is the frontend part you use the manual code or what library. But I’m personally a backend guy, I’m very lazy to code “css” =))) And the most convenient is that I often use Vue UI Library to solve. I have used some guys like Vuetify, Vue Framework7, Vuesax, I noticed that they have the type of components that come with many props (the purpose is probably to reuse the component comfortably. ) Like vuetify about a button

Ok above you may notice that it has 4 props [color, small, outline, block] I look like it is very convenient and custom comfortable, but =))) how will you use the button There are so many places on your system, are props going to be repeated like that: -? Not to mention, if I fix a props, the remaining guys have to fix it if they want to sync. And this is just a button if you use UI library guys, it has many other components with many other options. This is how I usually do it, I will create a js file type buttonProps.js

Then on the Vue Component file use the type

As you can see that I use v-bind, it will support bind many props up: -? Now I want to change the properties of a button, just fix it in one place only. For Render

Do something on page load

Often times I will encounter cases like doing something when loading a page, such as fetching data is a typical one. And often we use Vue mounted hook , right. In this section, I will talk more about its lifecycle. In Vue, its lifecycle consists of 4 main parts as follows in a component

  • Created
  • Mounted
  • Updated
  • Destroyed

According to my understanding, the first guy created is created now, on the page I have everything like data, computed, watcher, all but missing DOM =))))))
mounted , it started to assign its component to the DOM that simple. And the updated guy supports reactive data changes with destroyed then destroy everything when not needed =)) So to use these hooks to solve the first problem, I can simply choose created or mounted. To use it, just add the hook name to type like

However, I will say that which two guys should use it and which one is better: -? In most cases, I often use mounted () because now the component is mounted on the dom, then you can arbitrarily manipulate something before it renders even manipulating the DOM (rather than just fetching the data). Please ) . Like you want to manipulate the DOM but write in created, the error is right =)) OK, saying that is like saying that the created guy is broken ??
?

NO

In case you do not manipulate the DOM at all, you just want to fetch the data about the update into the data, I recommend using created because it is the guy running before mounted so the fetch data on it is done before: -? means you will receive the returned data a bit earlier. That’s my advice, but no one says that using mounted for fetch data is wrong: v

Dynamic directive arguments

If I remember correctly, Vue 2.6 supports my directive arguments. By the way, we can dynamically use events like clicking dblclick hover and ….. all events that are applied in a component. For example, I have 1 button

Here you can see I have a button 1 event click and click on it will run the function show.However, for example, suppose I want to have another dblclick type on that button also run the function show. And depending on a certain condition, the button will enable either @click or @dblclick . So how to solve it: -?
So as I said above Vue 2.6 it supports my directive arguments ie we can write the following style

At the button, it will look like the following

That’s it =)) You can use something as a computed to validate under certain conditions or now just need to change

The event in the input button only dblclick only

Functional Component

There are times when I work, there will be a few components just for the purpose of displaying data only, in this case to improve render speed as well as memory performance, I recommend using functional components basically. As a stateless component it will not have a script tag, it will only receive props to display data.

Provider / Consumer

As I said above Functional Component, it will only display data based on this I can use in combination with another component running js (that means I will separate the logic from not writing both markup and markup logic on 1 component, this I encountered a lot of it is sometimes easy to clam because maybe only one component file is more than a thousand lines). If you want to split, use Provider / Consumer pattern . Consumer will be functional component, I’ll throw logic at Provider. example to deploy



Share the news now

Source : Viblo