Vue3 Setup Methods

Posted on  by admin

Getting Started

In this series, I'm focusing on the basics needed to start working in Vue 3 for people who might have some experience in Vue 2, but who haven't yet built anything in Vue 3. Check out my previous posts in the series:. Today, I'll introduce how to use methods, watch, and computed in Vue 3, and I'll also give a general comparison of watch and the new watchEffect.

The way I learn best is by connecting abstract concepts to a real world situation, so I tried to think of a simple, realistic situation for using methods, watch, and computed.

The situation would need to demonstrate the following:. doing something to data properties to change them (using methods). making something else occur (i.e, a side effect) because of a change to the data properties (using watch). returning a value that is calculated based on data properties that have been changed (computed). I will use a real-world example of a company with employees and managers; the logic will help keep track of number of employees, number of managers, and total company headcount.

Not the most exciting example, but I really just want to keep it simple.

One of the first things I need to be able to do, whether I'm using Vue 2 or Vue 3, is be able to make stuff happen with methods/functions (note: I'm using the terms functions and methods interchangeably in this section).

The magic of Vue is its reactivity, so local state updates automatically as stuff happens. The stuff that happens is often triggered by methods.

Computed Properties

In my real-world example, I want to create a component that has a variable to represent the number of employees with buttons I click to add or subtract the number of employees, changing the headcount. I'll write functions to perform these basic actions.

Here's what the rendered component looks like:. I am familiar with the Vue 2 way of adding functions to the component: add each function to the methods object:. And the following line from the template shows that Vue 2 and Vue 3 are no different in how the methods are invoked in the template:.

Functions in Vue

Some Vue Vite features you should know

However, Vue 3 is different now in regards to where we write the methods in the script.

In Vue 3, I can now write my functions inside the setup function, which runs very early in the component lifecycle (before the component instance is even created).

Reference vs Invoke: function () { [native code] }

  • I no longer have to write all my functions in the methods property of the options API.

  • In this example, I have written two basic functions, and those functions are not separated into a separate methods block like in Vue 2, they are inside setup with the related logic like the variable for numEmployees.

  • I can make the functions available to the template by returning an object that includes them:.

  • Notice that there is no keyword this when referring to numEmployees.

Methods that are inside the setup function no longer use the keyword this to refer to properties on the component instance since setup runs before the component instance is even created.

I was very used to writing this-dot everything in Vue 2, but that is no longer the experience in Vue 3.

The use of ref() surrounding the data property is something I introduced in the last post, and it's important here.

And there you have it!

For reactivity to work in Vue, the data being tracked needs to be wrapped in an object, which is why in Vue 2, the data method in the options API returned an object with those reactive data properties.

Function parameters in Vue

Now, Vue 3 uses ref to wrap primitive data in an object and reactive to make a copy of non-primitive data (I've only introduced ref so far in this series). This is important to methods because it helps me understand why I see numEmployees.value inside the function rather than just numEmployees.

Lesson Project

I have to use .value to reach the property inside the object created by ref and then perform the action on that value property.

Computed

(I don't have to use the .value property in the template, however. Just writing numEmployees grabs the value).

Writing all the methods inside the setup function may seem like it would get messy when there is more complexity going on in the component, but in practice, related logic could all be grouped together to run within its own function.

This is where Vue 3 starts to show its strengths.