Study

Difference Between methods and mounted in Vue.js

by Niyander

Vue.js is a popular JavaScript framework used to build dynamic user interfaces. Two essential concepts in Vue.js are methods and mounted. While both are crucial in developing Vue.js applications, they serve very different purposes. In this article, we’ll break down what methods and mounted are, highlight their differences, and demonstrate their usage with simple examples.

Understanding methods in Vue.js

methods in Vue.js are functions that you define in a component to perform actions. These actions can be triggered by user interactions like clicks, form submissions, or other events.

Key Features of methods:

  1. Defined inside the Vue instance: You declare them within the methods option of your Vue component.
  2. Triggered manually: They run when explicitly called, often in response to an event.
  3. Access to the component instance: methods can access the data and properties of the Vue instance using the this keyword.

Example of methods:

<!DOCTYPE html>
<html>
<head>
  <title>Vue 3</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
  <link href="https://fonts.cdnfonts.com/css/google-sans" rel="stylesheet">
  <style>
    body {
      font-family: 'Product Sans', sans-serif !important;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="sayHello">Click Me</button>
  </div>
  <script>
    const app = Vue.createApp({
      methods: {
        sayHello() {
          alert('Hello, Vue.js!');
        }
      }
    });
    app.mount("#app");
  </script>
</body>
</html>

In this example, the sayHello method is defined in the methods object. It is triggered when the button is clicked, showing an alert message.

Understanding mounted in Vue.js

mounted is a lifecycle hook in Vue.js. It is a special function that is automatically called after the component is added to the DOM (Document Object Model).

Key Features of mounted:

  1. Triggered automatically: It runs once the component has been rendered in the DOM.
  2. Used for initialization tasks: Commonly used to fetch data, initialize third-party libraries, or set up event listeners.
  3. Cannot be manually invoked: Unlike methods, mounted is invoked by Vue.js as part of the component’s lifecycle.

Example of mounted:

<!DOCTYPE html>
<html>
<head>
  <title>Vue 3</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
  <link href="https://fonts.cdnfonts.com/css/google-sans" rel="stylesheet">
  <style>
    body {
      font-family: 'Product Sans', sans-serif !important;
    }
  </style>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: ''
        };
      },
      mounted() {
        this.message = 'Welcome to Vue.js!';
      }
    });
    app.mount("#app");
  </script>
</body>
</html>

In this example, the mounted hook updates the message property as soon as the component is mounted to the DOM, displaying “Welcome to Vue.js!”.

Read also:  How to Declare Variables in Vue.js

Key Differences Between methods and mounted

Feature methods mounted
Purpose Define reusable functions Handle tasks after the component is mounted
Invocation Manually triggered Automatically triggered by Vue.js
Scope Can be called from templates or scripts Part of the Vue lifecycle hooks
Use Cases Event handling, reusable logic Initialization, fetching data, DOM manipulation

Combining methods and mounted

In most Vue.js applications, you will often use methods and mounted together. Here’s a simple example:

<!DOCTYPE html>
<html>
<head>
  <title>Vue 3</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
  <link href="https://fonts.cdnfonts.com/css/google-sans" rel="stylesheet">
  <style>
    body {
      font-family: 'Product Sans', sans-serif !important;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="loadData">Load Data</button>
    <p v-if="data">{{ data }}</p>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          data: ''
        };
      },
      methods: {
        loadData() {
          this.data = 'Data loaded successfully!';
        }
      },
      mounted() {
        console.log('Component has been mounted');
      }
    });
    app.mount("#app");
  </script>
</body>
</html>

Here, the loadData method is manually triggered by a button click, while the mounted hook logs a message to the console when the component is initialized.

Conclusion

In Vue.js, methods and mounted serve distinct yet complementary roles. methods allow you to define reusable functions that respond to user actions, while mounted is a lifecycle hook that enables you to perform tasks when the component is initialized. Understanding how to use both effectively will help you build more robust and dynamic Vue.js applications.

Feel free to experiment with the examples above to get a better grasp of their functionality!