Knowing when to use the computed property and the watch property can be confusing, especially for newbies.
Computed property creates new data from existing data properties, while the Watch property tracks a data property for changes and performs a function or set of functions whenever a change occurs.
Computed Property
<div id="app">
<div class="p-5">
<h3 class="mb-4 bg-primary p-3 text-white">Computed Property</h3>
<label>First name</label>
<input v-model="firstName" class="form-control" placeholder="Enter your first name">
<label class="mt-3">Last name</label>
<input v-model="lastName" class="form-control" placeholder="Enter your last name">
<div class="mt-3" v-if="fullName.length != ''">
My name is {{fullName}}
</div>
</div>
</div>
new Vue({
el: "#app",
data: {
firstName: "",
lastName: ""
},
computed: {
fullName() {
if (this.firstName == "" && this.lastName == "") {
return "";
}
return `${this.firstName} ${this.lastName}`;
}
}
});
From the illustration above, the combination of two data properties (firstName and lastName) creates a new data property(fullName). Rather than typing two words (firstName and LastName) wherever there is a need to get the full name, one word is typed (fullName).
Watch Property
<div id="app">
<div class="p-5">
<h3 class="mb-4 bg-danger p-3 text-white">Watch Property</h3>
<div class="mb-3">
{{randomNumber}}
</div>
<button class="btn btn-danger" @click="randomNumber = Math.floor(Math.random() * 10)">
Random String
</button>
<div class="mt-4">
{{specialText}}
</div>
</div>
</div>
new Vue({
el: "#app",
data: {
randomNumber: 0,
specialText: ""
},
watch: {
randomNumber: function (newValue) {
this.getSpecialText(newValue);
this.uploadToDatabase(newValue);
}
},
methods: {
getSpecialText(value) {
if (value % 4 === 0 && value !== 0) {
this.specialText = "This is a special number from the family of fours";
}else if (value % 3 === 0 && value !== 0) {
this.specialText = "The great descendant of threes";
}else{
this.specialText = "";
}
},
uploadToDatabase(value) {
if (value > 5) {
console.log("uploading to database");
}
}
}
});
The watch property allows you to run single or multiple functions when the data property you are tracking changes as illustrated above. In the above illustration, the code is watching for changes in randomNumber data, and whenever the value of randomNumber changes, a set of functions is initiated.
As a rule of thumb, I use computed properties
- whenever I want to create a new data property from one or more data properties,
while I use watch properties
- when I want to listen to when a data property changes
- when I want to initiate a function(s) when a change in data property meets a certain set of condition
I hope I have been able to explain in simple terms the computed property and watch property.
Do you enjoy this article, please drop a comment, like and share.
Cheers!!!
