Ways to force Vue to re-render a component.

Vue is a great component-based frontend library for single-page applications. Vue has its own unique architecture and it has its own reactivity system to manage the reactivity. Sometimes Vue’s reactivity system isn’t enough and sometimes we have to re-render components on our own. There are 4 main ways that we can do it. But which is the best way? Let’s figure it out by reading this article.

• Reload the entire page.

I would like to define this way as a horrible way of doing it. Because this one is just like restarting your computer each time you want to close an application. This is the worst solution ever for re-render a component and this is still a way of reloading a Vue component. My advice is don’t use this method in any kind of application :).

• The v-if hack.

Vue library is coming with the v-if directive that will only render a component when some give condition is true. If it’s false, the component will not exist at all in the DOM. Here’s how we can set up the v-if hack to work.

In this template, we have added the v-if directive:

<template>
  <my-component v-if="renderComponent" />
</template>

In the script we have added a method called forceRender which uses nextTick:

<script>
  export default {
    data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // Removing my-component from the DOM
        this.renderComponent = false;

        this.$nextTick(() => {
          // Adding the component back in
          this.renderComponent = true;
        });
      }
    }
  };
</script>

This way every time we call forceUpdate method the component(my-component in this example) is getting updated.

This is what’s going on behind the scene:

I. Initially renderComponent is set to true, so my-component is rendered.

II. Whenever we call forceRerender method, Vue will immediately set renderComponent to false. Then it will stop render my-component and removed it from the DOM because the v-if directive now evaluates to false.

III. On the nextTick of this method rederComponent value is set back to true. And now the v-if directive evaluates true and Vue starts rerendering the my-component again.

We can call this a terrible way of updating a component because this is some sort of a hack. We call it a hack because we are hacking around how Vue works and what Vue wanted to do. This is also not a recommended way of updating a component.

• Using the $forceUpdate.

This is one of the best ways to update a component because official Vue docs are recommending this method to update a component manually. Usually, Vue will react to changes in dependencies by updating the view. However, when we call $forceUpdate method, we can force that update to occur, even if none of the dependencies has actually changed. But a key thing to remember when we use this way is, This will not update any computed properties we have, calling $forceUpdate will only force the view to re-render.

This is how we can do it with the code:

export default {
  methods: {
    ForcesUpdateComponent() {
      // your code
      this.$forceUpdate();
      // your code
    }
  }
}

• Using the key changing technique

This is the best and most recommended way to update a Vue component. What we do here is we will supply a key attribute so Vue knows that a specific component is coupled or 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 re-create a new one.

Here is a very basic way of doing it:

<template>
  <component-to-re-render :key="componentKey" />
</template>
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;
    }
  }
}

Every time that forceRerender is called, our prop componentKey will change. When this happens, Vue will know that it has to destroy the component and create a new one. What you get is a child component that will re-initialize itself and “reset” its state. this simple and elegant way is solving the most common challenge we face in the Vue app development!

These are the ways of updating a Vue component and hope you enjoyed the read. Thank you :) !!