All language subtitles for 005 Watchers and Computed Properties_en

In this lecture, we're going to learn how to create washers and computed properties with the Composition

API.

The concepts we learned with the previous API will remain the same.

Washers and computed properties function the same in the composition API as they did in the options

API.

The syntax is just different.

We'll start by learning how to write washers watchers are a way to watch properties on components.

If a property changes, we can run a function to execute further logic.

The watcher will create will reverse a string if an input field is changed.

View has two functions for creating washers.

Let's explore them both.

We'll continue working in the app component file.

In the setup function, we'll create two variables called phrase and reversed phrase.

Both will be set to the ref function with an empty string.

Next, we'll add them to the return statement.

We'll be able to use them in the template below the other paragraph tags will add another one with an

input.

We can bind the input to the data by using the V model directive.

Its expression will be the phrase reference we created.

Below this will want to output the reversed phrase as well.

We'll create a pair of paragraph tags with the expression.

This won't work yet because the reversed phrase variable will never be updated.

We want it to store a copy of the phrase variable, but in reverse.

This issue can be resolved by using a watcher in the script.

BLOCK We'll update the import statement for a function called Watch Effect.

The watch function allows us to watch dependencies in the component.

We'll want to use it to update the reversed phrase variable.

If the phrase variable changes down in the setup function, we'll call the watch function.

The watch function can be used in various ways.

We'll start by learning the most straightforward way of using it, which is to pass in a function.

In the function, we'll set the reversed phrase value property to the following phrase dot value dot

split.

Dot reverse.

Dot join.

This chain of function will reverse the string view, will look at the contents of the function.

It'll notice we're using the phrase variable as a dependency.

It'll start watching the phrase variable for us.

If it ever changes, it'll run the function we passed in.

This will cause the reversed phrase variable to update whenever the user inputs a string.

Let's try testing this out in the browser.

Any time we fill in the input, the variable is reversed.

This approach is one way of using watchers.

Let's explore the second function for creating watchers.

We can make the watcher more efficient by telling it what it should watch instead of letting it guess

what to watch.

Back in the editor.

Let's update the import statement to include a function called watch.

Next, let's replace the watch effect function with the watch function.

The first argument will be different from before.

Instead of passing in a function pass in the phrase variable, this argument will tell the watch function

to only watch the phrase variable.

If the contents of the function has other dependencies, they will not trigger the function to run.

If we decide to tell the watch function what dependencies to watch, we are passed in two arguments

to the callback function.

There the new and old values of the dependency we're watching.

In some scenarios, we'll want to watch multiple dependencies.

We can watch for multiple dependencies by changing the first argument of the watch function to an array,

the array will contain a list of dependencies to watch.

We'll wrap the frames variable with square brackets.

If we decide to launch multiple dependencies, the parameters for the callback function will be arrays

as well.

We'll wrap the parameters with square brackets like so.

This form is probably the best way to use the watch function if you want to be specific on what you

want to watch.

The watcher we created is very simple.

Therefore, all comments output the function and recall the watch effect function with the original

solution.

This is how we can create watchers.

The concept remains the same.

All that's changed is the syntax.

Let's move on to learning about computed properties.

Computed properties function the same in the composition API as it did in the Options API.

They are properties that will store a cached value.

If the dependencies inside the function get updated, the function will be called again.

The property will be updated with the value returned by the function.

They're similar to watchers, but the function for computed properties must return a value.

Let's start writing a computed property.

The computed property will create will double the number in the component.

Computed properties can be created by using the computed function.

We'll need to import it if we want to use it at the top of the script.

BLOCK We'll update the import statement for the view package to include the computed function.

Then below the increment function will create a variable called double.

It'll be sent to the computed function.

The computed function expects a function to be passed in will pass in an arrow function.

The function must return.

A value will return the num dot value property multiplied by two.

The computed and watch functions are similar to one another.

They'll watch the dependencies in the function you passed in.

One big difference between the two is the computed function will return a reactive reference.

We'll be able to use the reference in the template if we decide to add it to the return statement.

In fact, let's do that.

Something to keep in mind.

Since the computed function returns a reactive reference, the value of the computed property is hidden

inside the value property.

If we're returning the computed property view will do what it does for other reactive references.

It will unwrap the reference to allow you to access the value directly through the name.

Inside the template, we'll add a paragraph tag below the numb expression.

Inside it we'll have an expression that outputs the double computed property.

Let's switch to the browser to view the result.

Every time we press the increment function, the double computed property will be double the number.

The computed function will notice we're using the num variable.

It will keep track of it to know when to run the function we passed in the computed function.

We're finished with learning about watchers and computed properties.

They allow us to watch the dependencies and variables in a component.

The main difference between the two is the computed function will return a reactive reference, whereas

the watch function will not.