Introduction to Vue.js Computed Properties
This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Computed Properties" Lesson
>> Sarah Drasner: Filtering is really nicely done with a computed values. And there are few reasons for this. Computed properties are calculations that would be cached and only be updated when a dependency has changed. So, if you have a bunch of logic that you need to run and that dependency is not changing, it's not going to keep rerunning those calculations every time something changes in the dom or the virtual domain.
[00:00:26] It's highly performant, but you should use it with some understanding because it's a little bit different from methods. Methods we're executing just like a normal function. Computed is not the same. So this is the simplest possible computed example and not at all really use case. Like, probably don't use it for this.
[00:00:44] So I am going to actually open this one in code pen as well. If I write my name here and the initial entry is my name and the computed value is you're a monster Sarah. Basically we have this user data here and previously when we have used something in this Moustache template, it had to be in the data.
[00:01:09] We have, you know it has to be something that's in the data. But now we're not, we have something that it's not in the data. This user data is being outputted just like we're used to, but we also have this thing called greeting. And greeting is the computed property.
[00:01:24] And you'll noticed the way that we're using it is we're actually using it as a property. We're not, you know, using it as a function. I'm not writing parens here. I'm actually taking this and using it as though it's a piece of that data that's hanging off of this.
[00:01:40] I have to return it so that I can get this, like template literal outputting for me. The thing to understand about computed values, or computed properties is that it's a different view of the same data. So it's taking something that already exists, and it's giving you a different view of it.
[00:01:57] You can think of it a little bit like .map where you have an existing array, and then you have a new array that you're creating off of it. It's not actually affecting that first you know piece of data at all. That piece of data is completely separate from it.
>> Speaker 2: Question.
>> Sarah Drasner: Yeah?
>> Speaker 2: The lazy modifier, whatever.
>> Speaker 2: It fires on enter and blur, anything else?
>> Sarah Drasner: The .lazy, I think it enter and blur.
>> Speaker 2: Those are the two I tracked.
>> Sarah Drasner: I think you can configure it to work on other types of events than just .enter, but I'm pretty sure that that's like, the default.
>> Speaker 2: Ok.
>> Sarah Drasner: Yeah, I'd have to play around with it.
>> Speaker 2: Yeah, I know it works on blur, too. That's the only one I could think to try.
>> Sarah Drasner: Yeah, yeah. That makes sense. Okay so computed and methods. Computed runs only when the dependency is changed I mentioned this before methods run whenever an update occurs.
[00:03:00] Computed is cashed. Methods are not cached. Computed should be used as a property in place of data. And methods typically are invoked on at, or, but can, they can be invoked whenever you need them, just like the functions, they're flexible. Computed is by default getter only, but you can define a setter.
[00:03:19] This is something that you won't understand until later on in this Section. I'm gonna go into getters and setters a little bit more. So by default it's just a getter, and methods are getter and setter. So if we're searching a title, you guys just asked for this filtering.
[00:03:39] We're going to say d-a ao we can update this really fast if we want to. How, or super, whatever, what have you. And you can see how quickly that's updating. It's updating really super fast. The other thing that you can see is if I have something like this list.
[00:03:59] I can still use these methods on a computer value, so I can still say like this and execute methods on that different view of the same data. So using our computer property in place of data, we have a different view of this data. We have methods like we had before running off of that view instance and then in the computed values we have just another object.
[00:04:26] We're using it just like method's was. So, I'm gonna blur out that method so that you can focus just on the computed value for a second. In the computer value, we have this thing called filtered films. Inside of that we have a thing that's just basically RegExp getting rid of capitalization things because you know you could see I was using lower case in.
[00:04:49] Java Script is very, very trying to make sure everything matches exactly. So I have to kind of use RegExp to make sure it's not. So I return this .ratings info which is what our array was, if you remember. This .ratingsinfo.filter then we pass in the EL and we check for matches in that filter that we created.
[00:05:12] Now, before we had this table that was set up with this v-for="entry in ratingsInfo", the only change we make to our code is changing it to filteredFilms, and filteredFilms is that computed property. So does that seem clear to people? Instead of using ratings info like we had in this, in our data property we are just changing it to filtered.
>> Sarah Drasner: So the differences here, if we go into this codepen one last time, we've got our data is counter and we have a method that is this.counter++. And we've got a counter and a countup. And again if we increase this, this computed value does the same thing.
[00:05:59] It executes the same method in the same way, but it starts from one. We're starting from one instead of zero.