Vue.js important concepts that you should know

1. Computed vs methods

Computed properties actually work like getters, they are usually using to compose new data from existing properties and they don't accept arguments. Computed properties know if the values used in the function changed so they don’t need to run every time to check

Methods are static functions and they are useful for DOM event handling, logic parts. And you can pass arguments to methods. Methods don’t know if the values used in the function changed so they need to run every time to check.

2. Lifecycle hooks (how do they work?)

Specify your properties in the created hook it’s very important because the template hasn't mounted yet so you can prepare your data to use it in the template. (for example, make API requests).

The mounted hook calls after the template have created and inserted in the DOM, and now you have access to the vm.$el property. But also you should remember that mounted does not guarantee that all child components have also been mounted. if you want to wait until the entire view has been rendered, you can use vm.$nextTick inside of mounted.

Know how to avoid memory leaks (beforeDestroy hook)

3. Know the correct way to force Vue to re-render a component

Sometimes reactivity in vue doesn't work perfectly and quite often you will need to re-render your components. There are many methods to do that but I’ll mention here only the worst (v-if hack) and the best ways (key changing).

let’s see an example

So what happens here?

  1. Initially isComponentsVisibleis set to true, so some-component is rendered
  2. When we call forceRerender we immediately set isComponentsVisible to false
  3. We stop rendering some-component because the v-if directive now equal to false
  4. On the next tick isComponentsVisibleis set back to true
  5. Now the v-if directive equal to true, so we start rendering some-component again.

There are two parts that are quite important to understand how this actually works.

First, we got to wait until the next tick or we won’t see any changes. In Vue, a tick is a single DOM update cycle. Vue will collect all updates made in the same tick, and at the end of a tick, it will update what is rendered into the DOM based on these updates. If we don’t wait until the next tick, our updates isComponentsVisiblewill just cancel themselves out, and nothing will update.

Second, Vue will create an entirely new component when we render the second time. Vue will destroy the first one and create a new one. It means that our new some-component will go through all of its lifecycles as normal created, mounted, and so on.

It is terrible!

To do this in the right and correct way, we will supply a key attribute so Vue knows that a specific component is tied to a specific piece of data. If the key stays the same, it won't change the component, but if the key changes, Vue knows that it should get rid of the old component and create a new one.

Example:

Every time that forceRerender is called, our prop componentKey will change. When this happens, Vue will know that it got to destroy the component and create a new one.

What you get is a child component that will re-initialize itself and reset it’s state. And this is actually what we need!

Very simple and easy!

Yeah, we’ve got it!

4. Don’t write difficult JavaScript expressions in the template

Let’s see examples:

Wrong

Use computed properties instead of making your template unreadable.

The elegant way

Now our template become readable!

5. Vue Slots makes your code easily and understandable

The parent-child relationship is one of the most used ways when it comes to connecting your components with each other but this may not be the best method in some situations. Let’s say you have a large number of child components in a single parent component, you will have to use a large number of props and emitting events to handle those child components and it will become a mess in no time. This is the exact situation you will face on a large scale project and Vue.js has a spot-on solution for this problem as well.

Slots are used in Vue.js to provide an alternative and elegant way to represent parent-child relationships. Slots provide you an outlet to place content in new places. A basic example of slots can be shown as follows:

When above component it rendered <slot></slot> tag will be replaced by wrapper-content

There are many different types of slots you can use in Vue projects. But the most important thing you need to remember is slots make a big difference to your projects when it grows and it allows you to maintain good, understandable code throughout the project.

6. Validate your Props

I wasn’t sure about this practice easier, I came to know about it very late, but one of the best practices to follow. When you are working on a large-scale project, it is not possible to remember the type, format, and conventions that you have used in a prop. So considering the below example in a similar way, you can write prop validation.

Not the best wat to register props:

The perfect way:

Thank you for reading this article! I hope I helped you understand these very important Vue concepts, I’m sure this article will help you in your coding life.

I’ll catch you next time!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store