Call a Vue Method on page load in Vue JS

In this post, we will see how we can run a function/method on page load in Vue JS.

Sometimes we need to call a method as soon as the page is loaded to fetch some data from our server, initialize any data, or do some animation.

To do that, we can use the mounted() or the created() lifecycle hook provided by Vue JS.

So, in this article we will see how to call a method using:

mounted() hook, and
created() hook

First, let’s understand lifecycle hooks in Vue.

What are Lifecycle Hooks in Vue?

The lifecycle hook in Vue can be defined as the series of stages a Vue component has to go through before it renders everything properly on the browser.

As you run or load a page in Vue, it goes through these stages:

created
mounted
updated
destroyed

In the created stage, the component set up the following: reactive data, computed properties, methods, and watchers.

In the mounted stage, the components DOM tree is created, and all the synchronous child components are mounted (does not include the async components)

The updated hook is called after any DOM updates in the component that is caused by any state changes.

The destroyed hook is called when the Vue instance has been destroyed i.e when the component is no longer needed.

Now, let’s see how we can call a method using the mounted and created hook in Vue.

1. Call a Method using mounted() hook

We can call a method on page load in the mounted() lifecycle hook.

For example:

<script>
export default {
  name: "App",
  methods: {
    loadData() {
      console.log('Loading user data...')
    },
  },
  mounted() {
    this.loadData();
  },
};
</script>

Here, we created a loadData() method in the methods object property.

Next, we called the method, this.loadData() in the mounted() hook.

So, when we load the page, as soon as the component reaches the mounted stage it will call the method loadData() and it will give a console log in our terminal.

Reason to use mounted() hook here

Because in mounted hook, our reactive data is set up, props are initialized, and computed properties and watchers are set up too.
And most important our DOM tree is set up in the mounted hook. That means if the method has to do any changes to the DOM element, it can do it easily.

We can also use the created hook to call a Vue method on page load.

2. Call a Vue Method using created() hook

The next option is to use the created() lifecycle hook to call a method in Vue.

For example:

<script>
export default {
  name: "App",
  methods: {
    loadData() {
      console.log('Loading user data...')
    },
  },
  created() {
    this.loadData();
  },
};
</script>

Here, the Vue method, this.loadData is called in the created() hook instead of the mounted().

So as soon the page loads the method will run and your data will be loaded.

Now, why should we use mounted() instead of created() hook ?

Because since the created() hook comes before the mounted() hook, the DOM tree is NOT initialized at that point.

So, if the method/function in the methods object property had something to do with DOM manipulation, then it will not work properly

When can we use created() hook to call a method?

If your method doesn’t have to access the DOM element and it just has to fetch data and store it in the data property then you can call the Vue method in created() lifecycle hook.

Read about the lifecycle hook in details: Options: Lifecycle | Vue.js

How to call a function in VUE template?

How to use setTimeout with Vue

What are Lifecycle Hooks in Vue?

1. Call a Method using mounted() hook

2. Call a Vue Method using created() hook

Related Posts