Vue.js Data, Methods, and Computed Properties

In Vue.js, data, methods, and computed properties are key parts of the Vue instance. These options define how your application stores values, responds to user actions, and derives new values based on existing data. Together, they form the backbone of Vue's reactivity system.

Defining Reactive Data

The data() option holds your app's reactive state. It must return an object containing all properties used in the template. Vue tracks these values and updates the DOM automatically when they change.

Example:

<div id="app">
  <h2>{{ name }}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        name: 'Anita' // Reactive property
      };
    }
  }).mount('#app');
</script>

In this example, the name property is reactive. Changing its value updates the heading automatically.

Using Methods in Vue

The methods option defines functions that respond to user events or perform operations on your data. These functions are executed every time they are called and are not cached.

Example:

<div id="app">
  <h2>{{ counter }}</h2>
  <button @click="increment">Increase</button>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        counter: 0
      };
    },
    methods: {
      increment() {
        this.counter++; // Increase the counter value
      }
    }
  }).mount('#app');
</script>

When the button is clicked, the increment method updates the counter, and the view reflects the new value.

What Are Computed Properties?

computed properties return values based on other reactive properties. These properties, unlike methods, cache their values and re-evaluate them only when their dependencies alter. This makes them ideal for displaying values that depend on other state data.

Example:

<div id="app">
  <p>First Name: {{ firstName }}</p>
  <p>Last Name: {{ lastName }}</p>
  <p>Full Name: {{ fullName }}</p>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        firstName: 'Rahul',
        lastName: 'Sharma'
      };
    },
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName;
      }
    }
  }).mount('#app');
</script>

Here, fullName updates automatically when firstName or lastName changes. Vue efficiently caches the result unless dependencies change.

Difference Between Methods and Computed Properties

Conclusion

In this tutorial, you learned how Vue uses data, methods, and computed properties to manage reactive state, handle logic, and display dynamic content. These features work together to create seamless, interactive user interfaces. With this understanding, you're ready to explore data binding and event handling to further enhance your Vue applications.