Hey guys, this is a bonus lecture. So the reason why I'm making this is, so most of you guys have some confusion between the method properties and computed properties, you know when to use what? And also one of the questions I've been getting is why can't we use methods look at properties for computed as well? Or why can't we use computed for methods as well. So what's the exact difference between these two? So let's look into that in this lecture.

So what we'll do is we have this component home load view, and we'll create a method property that says return full name, and that returns Okay, before we can return anything, it's all to have our data property. And inside the data property, let's say we have first name. And we have last name. This method, what it does is returns this dot first name plus this dot last name, right? So let's also have a computed property. So this company property, let's say returns age, right?

Was an age. It's also have a data property that says age. And you can say return this dot age. So what we can do is we can have two input properties, three is placeholder. And we can bind it to first name and last name. Let's also have another input property that is bound to the age.

All right, so now what we want is let's have a heading tag. And inside of this, I can see my name is here, we're going to use a method right return. Full Name and it's also have a heading tag. and here we can see return person's age. All right, so I can save it and I can type my name I can also enter my age. All right, so for this or we can also do this and add a small space just for aesthetic purposes Alright, so we'll also console log to find out when each method is being called and when each computed property is being called computed property has been caught.

Okay, so we can have this console statements about return Alright, so in the beginning muttered and computed property has been called Okay, so now while I'm entering my name, I'm getting method property has been called. Sounds fair, right? So I'm dealing something using the method. So the properties inside the methods are changing. So the method property is being called Notice how the computed property is not being called because we're not doing anything with the age yet. So we'll also enter my last last name.

So we have the method property has been called for 13 times. Now the difference is, notice that while calling the method properties, we're not using the computed properties. But if I refresh it, and if I'm entering my age, you can see method properties also been called along with computed property. So the reason why method property is also being executed is so like we discussed earlier view uses something called as a virtual DOM, right. So what happens is that whenever the virtual Dom updates, view also updates the mental properties. So what happens is that unless the state requires any changes, the computed property will not be called.

But for methods. As long as the virtual DOM is updating, we'll get the method to be called again and again. So it's usually a good practice to use computed properties rather than method properties, to make your application much more real. So that's one example to clarify the difference between method properties and computed properties and why you need to use and where you need to use committed properties and where you need to use computed properties. So I hope that's clear. So that's it for this one.

I'll see you the next one.