Vue.Js Computed And Watcher Properties
Vue.Js Computed And Watcher Properties:–In earlier tutorials we have already seen the templates and their rendering in DOM structure very well. But now we will learn about computed properties. We will study the following topic and concepts?
What are computed and watcher properties and where and how do we use them in our application?
We will cover both topics one by one in detail. First we come across computed property. So let you know about the computed property.
Vue.Js Computed Property | Example
You have oftenly seen that we can bind javascript data properties in a template directly by using string interpolation approach. Therefore we need not to call property on data object explicity. Vue.Js does itself this operation for us.
But here comes a serious problem itself when we need to execute more complex logic like looping using interpolation to bind with template. So it is recommended not to use any loop or complex data operation in template interpolation. To avoid this problem in order to maintain our code easily Vue.Js provide us computed property.
Converting Javascript Object into Template Without Computed Property | Example
Here we are going to discuss only about the scenario where you can see only interpolation concept to access javascript data object’s properties.
In example we write a code to reverse the message value. See the example how does the changes take place.
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Tutorialsplane'
},
methods: {
button_click: function (event) {
alert('Hello ' + this.message + '!')
if (event) {
alert(event.target.tagName)
}
}
}
})
</script>
</body>
</html>
|
Converting Javascript Object into template With Computed Property | Example
By using comp property approach makes it pretty neat and concise method to make any change in data property.
Here we have used {{ reversedMessage }} interpolation notation to reverse the “message”.
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="button_click">click</button>
{{ reversedMessage }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Tutorialsplane'
},
methods: {
button_click: function (event) {
alert('Hello ' + this.message + '!')
if (event) {
alert(event.target.tagName)
}
}
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
|
Computed Caching Vs Methods
1.In above example we can bind the message property by using method declaration instead of computed propertyreversedMessage. But computed property has a unique feature cashing which methods don’t provide.You know cashing is a more powerful principle of any operation in programming which helps a programmer in many ways.
2.In general computed properties provide caching which in turn works efficiently than a method approach in program.
3.In other words you can reach by the term uncaching means extraneous work done by the program which reduces performance for the program.
4.So we recommend you to write computed propert only when they are needed.
5.So computed property fetches ole evaluated data and returns it each time until no change is seen in data object.
6.A computed property re-evaluate itself only if data property got changed using dependency updation.
7.Below example is the beast suitable example of computed property where we are cashing the date in our program.
computed: {
now: function () {
return Date.now()
}
}
Computed Getters And Setters | Example
Computed property provide getters and setters facility to set and get data properties according your program’s need. Below we are giving an example which has two data properties namedfirstName and
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="button_click">click</button><br />
<p>FirstName:: {{ firstName }}</p>
<p>LastName:: {{ lastName }}</p>
<p>FullName::{{ fullName }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Tutorialsplane',
firstName: 'John ',
lastName: 'Brandy'
},
methods: {
button_click: function (event) {
alert('Hello ' + this.message + '!')
if (event) {
alert(event.target.tagName)
}
}
},
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})
</script>
</body>
</html>
|
Watchers | Example
Watchers are used in such scenarios where data changes quickly. In below example we use a javascript object named Question. To see the change in value we have used v-model directive. When a user types something in input textbox ; immediately alert comes up after notifying the change in old value(i.e null initially) and hence this work is done by watcher property as we have seen in above program.
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="searchQuery"/>
{{ searchQuery }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message:'The Tutorialsplane is the best and largest web development tutorials website',
ans:true,
searchQuery:'',
games: [
'Clash Royale',
'Pokeman Go',
'Dead Trigger 2',
'Minecraft'
],
},
methods: {
reverseTemplate: function () {
this.message = this.message.split('').reverse().join('')
}
},
watch:{
searchQuery:function(newValue, oldValue){
console.log("watch called")
alert('Counter changed from ' + oldValue + ' to ' + newValue + '!')
}
}
})
</script>
</body>
</html>
|
Advertisements
