Original subtitles

In this lecture, we're going to look at another function for creative reactive references.

View provides us with two functions for creating reactive references.

The first function is the ref function.

The second function is called reactive.

We'll learn about the reactive function next.

Afterward, we'll discuss the differences between the two functions.

In the setup function.

We're going to create a variable called user.

It'll be set to an object.

One thing I want you to notice is that we're defining the variable below the increment function.

We can place the variable definition anywhere we want in the setup function.

This flexibility is one of the main benefits of the composition API.

We can arrange the code inside the function.

By logic, the number variable and increment function are grouped together.

We don't have to scroll around to work with it.

Moving on will create two properties in the user object called name and age.

Assign the properties any values you'd like.

Just like the number variable.

This will not be reactive.

If we were to add the variable to the list of values to return, it'd be available in the template during

the mounting phase.

However, it will not be reactive.

We can make it reactive with the reactive function at the top of the script.

BLOCK will add on to the list of functions to import by adding the reactive function.

This idea of importing function is a common thing.

We'll have to perform whenever we want to add functionality to our component.

The composition API requires we import the functions we want.

They do not automatically get injected into the component.

Will wrap the user object with the reactive function.

Next, we'll return the user object.

We'll want to test its reactivity below the variable definition.

We'll create a timeout with the set timeout function.

It'll run after 3 seconds has passed.

Inside the callback function, we'll update the user name property to a different value.

This is one difference between the reactive and ref functions.

The value returned by the reactive function is an object with reactivity.

The properties don't need to be accessed via a value property.

You can access them like you regularly would.

The last thing we'll do is use the object in the template.

Scroll to the template block.

We'll add a paragraph tag below the button.

Well, insert an expression inside the tag.

The expression will be set to username.

Let's refresh the page.

After 3 seconds the name will change because we updated it in a timeout function.

The reactive function is another way to make a variable have reactivity.

It doesn't seem that much different than the ref function.

So what are the differences between the two?

The biggest difference is the types of values you can use in either one.

The ref function is meant for primitive values such as strings, numbers and booleans.

If you want to create a reactive object, you'll need to use the reactive function.

You can't pass a primitive value to the reactive function, otherwise you will receive errors for doing

so.

Both functions add reactivity to your values, but for different data types.

The other difference between the two functions is how values are accessed.

The ref function returns an object where the original value is stored in a property called value.

If you're using the reactive reference in a template, you don't have to access it through the value

property.

View will take care of unwrapping the object for you.

The value can be accessed directly through the variable.

The reactive function doesn't move your values.

They will remain in the exact location you defined them.

This applies to when you're using them in the setup function and in the template.

This brings us to the next question.

When should we use either one?

Theoretically, you can use the reactive function once to store all the components data.

However, this is not recommended for two reasons.

Firstly, you miss out on the organisation the composition API offers.

It defeats the purpose of using it.

Secondly, there are limitations to the reactive function.

We can't structure the object, nor can we use the spread operator.

This limitation is something you may want to do to make your code more readable.

Let me show you what I mean.

In the return statement, we're going to add the spread operator to the user variable.

We'll update the expression we used in the template for the user object.

We'll update the expression from user name to name.

Let's refresh the page on the browser.

After 3 seconds have passed, the name will remain the same.

This is because we lose reactivity if we were to attempt to spread the object.

However, it is possible to have the best of both worlds.

View introduces a function for converting a reactive object's properties into individual reactive references.

Let's go back to the editor for a moment.

We're going to update the import statement for the View package by adding a function called two reps.

The two refs function converts an object's properties into separate reactive references.

In the return statement, we can wrap the user variable with the two refs function before spreading

it.

This function will allow us to keep the object, but shorten the names in the template.

Let's refresh the page to check if the name updates after 3 seconds.

The name becomes reactive again.

The two refs function assists you with spreading an object while also allowing you to keep the properties

reactive.

Despite its availability, I don't recommend using it for storing the entire components data in a single

object.

Data in objects should be grouped by how relative they are to one another.

In the resource section of this lecture, I provide a link to the topic of refs versus reactive.

I recommend reading this after you've become more familiar with the composition API, it gives a bit

more information about the differences between the two functions.