Original subtitles

In this lecture.

We're going to get started with the composition API.

Before you start, I recommend downloading the starter files in this lecture.

Upload it anywhere on your machine.

After uploading it, run the NPM.

Install commands.

After installing the packages, you can start the server.

Pause this video if you need to set this up.

The files in this project are the default files in the default preset.

I've made changes to the app component file.

It's been stripped down to an empty object and a basic template.

We'll be keeping things reasonably minimal to focus on the composition API.

The very first thing we'll need to do is add the setup function to the options object.

This function is where we must create our options with the composition API.

This is the first difference between the Options API and Composition API.

Previously, we had to create our options in specific properties.

The composition takes a different approach by allowing you to add options inside this function.

This approach gives you more freedom because you can arrange your options in any order you'd like.

The first thing we'll create is some data inside this function defining a variable called number.

Its value will be zero.

We want this variable to be accessible in the template.

The setup function must return an object of properties and methods we wish to expose to the components.

Template will return an object with the number variable.

The number of variables will be exposed to the template will modify the template to output the number

variable inside the div tags.

Replace the content with a pair of paragraph tags.

We'll add an expression for the number variable.

Let's reload the page in the browser.

The number gets rendered onto the document.

Creating variables in the setup function is the equivalent of defining data properties in the options

API.

If we want the data to be available in the template, we'll need to return it from the setup function.

If you will check if you have the setup function defined in a component.

If it is, it will be called when the component is created.

The number by itself.

Isn't that interesting?

Let's make the application more interactive by adding a button that will increment the number.

Let's move back to the editor.

Inside the setup function, we'll define a function called increments.

Inside the function, we'll increment the number variable with the increment operator.

We want the function to be exposed to the template because we want to call it when a button is pressed,

we can do the same thing we did last time.

We can add it to the object returned by the function.

This is the equivalent of defining a function in the methods object with the options API.

The method will be exposed to the template.

We can call it like we would any other method in the template.

We'll add a button below the expression.

On the button, we'll add the Click Event listener with the Prevent Modifier.

If the Click Event is emitted, we'll call the increment function.

Time to give things a test back in the browser.

Try to click the button.

Nothing happens.

The template does not reflect the variables value.

Why is this the case?

If we look at the console for more information, nothing happens here either.

You will not update the template because the variable is not reactive.

We learned about reactivity in the second section of this course.

Let me recap what reactivity is.

Reactivity is the process of updating the template.

Whenever a change occurs in the data, the properties in the data object are reactive.

We will take the time to make your data reactive.

When the component was initialized, you didn't have to perform this part of the process yourself.

Things are different with the composition API.

We are the ones responsible for telling view which variables in the set of functions should be reactive.

This is what's called reactive reference.

A reactive reference is a variable that you will keep track of.

Any changes to the variable will be reflected in the template.

It adds reactivity to the variable.

We can create a reactive reference by using a function called ref.

At the top of the script block, we're going to import the ref function from view.

The ref function will wrap a value with reactivity back in the setup function will ramp the value for

the number variable with the ref function.

We'll need to make one modification to the increment function.

Instead of accessing the number variable directly, we'll access a property called value.

The ref function returns an object.

If we want to make changes to the value, we'll need to access it via the value property.

This is only for when we want to make changes to it.

When we return, the reactive reference.

We need to return the entire variable in the template.

We don't have to update.

The expression behind the scenes view will detect that the number variable is a reactive reference.

When it finds a reactive reference, it will automatically expose the inner value.

We don't need to access the references value via the value property.

The template can remain unchanged.

One last thing before we test this, we're going to log the number variable to check out what the ref

function returns.

All right, let's give things a test in the browser.

Try clicking on the button again.

The expression in the template gets updated.

This is great.

It's exactly what we were looking for.

Open the console to view the object returned by the ref function.

The object comes with a getter and setter.

This is how you can update the value and retrieve it.

It's important we use the ref function if we want our variables to be reactive.

It'll wrap the value with functions necessary for making it reactive.

Back in the editor, I'm going to remove the long statement from the function.

We've successfully created some data for our component.

We'll look at what else we can do with the composition API in the next lecture.