Computed and Methods

Vue allows the developer to add logic to the script and inside the template. The two most common ways to add this is logic is by using computed properties and methods via the script.

As mentioned by the original documentation, the template can include simple logic, but it is best to include logic within the script to keep templates from becoming hard to read.

Computed Properties

When you have a reactive property that needs logic applied to it, a computed property is useful. For example, if a company needs a to know if a customer has enough points for a free item:

<template>    <main>        <h1> {{ customer.name }} </h1>        //The computed property        <p> {{ rewardMessage }} </p>    </main></template><script setup>    import { reactive, computed } from "vue"    const customer = reactive({        name: "John",        points: 30 //the property used for rewardMessage    })    //Create the computed property and its logic    const rewardMessage = computed(() => {        return customer.points > 25 ?            "Congratulations, you have enough points!":            "You do not have enough points."    })</script>

In the example above, we see that the customer has 30 points. We create a computed property rewardMessage and use a ternary operator to figure out what rewardMessage we should output to the template.

Since John has 30 points, he has enough points and gets a congratulatory message.

Methods

A method is a function that you call from the script. The easiest way to understand a method is through an event handler.

We will use a click event handler to show you how we can use a method to update John's points:

<template>    <main>        <h1> {{ customer.name }} </h1>        <p> {{ customer.points }} </p>        //Buttons both using click event handlers to call methods        <button @click="addPoints"> Add Points </button>        <button @click="subtractPoints"> Subtract Points </button>    </main></template><script setup>    import { reactive } from "vue"    const customer = reactive({        name: "John",        points: 30    })    //method to add points    function addPoints() {        customer.points += 10;    }    //method to subtract points    function subtractPoints() {        customer.points -= 10;    }</script>

When the button corresponding to the addPoints function is clicked, 10 points are added to customer.points. The opposite happens when the subtractPoints function is called.

When the buttons are clicked, the component rerenders and the current customer.points value will show because it is a reactive property.

Difference between methods and computed properties

You can achieve the same thing a computed property can with a method. But a computed property is not meant to be actively called by a user action like methods are.

Here's why: a computed property is cached. In the case of the computed properties example:

const rewardMessage = computed(() => {    return customer.points > 25 ?        "Congratulations, you have enough points!":        "You do not have enough points."})

The customer.points value is a dependancy of rewardMessage. Therefore, if customer.points changes, rewardMessage will be updated on the rerender.

Simplest way to think about is this: methods are functions and computed properties are automatically updated values based on dependancies.