Vue.js
watch tips
▌Introduction
Basic
usage and some tips for watcher in Vue.js
▌Environment
▋vue.js 2.5.13
▌Implement
▋Basic usage
▋Simple way
data: {
title: 'Demo',
},
watch: {
title: function (newVal, oldVal) {
console.log('title', newVal, oldVal);
}
}
Which the “title” in watcher
must match the name inside the data.
▋With immediate or deep API
data: {
data: [{'id': 1,prod: 'Book'}, {'id': 2,prod: 'Toy'}]
},
watch: {
data: {
immediate: true, //"true"
will also trigger callback(handler) when initializing
deep: true, //Detect nested value changes inside
Objects,
handler: function (newVal, oldVal) {
console.log('data', newVal, oldVal);
}
}
}
1.
Use option: immediate,
to also trigger the callback when initializing.
2.
Use option: immediate,
to detect nested value changed inside an object.
A
full sample code is as following.
var app = new Vue({
el: "#app",
data: {
title: 'Demo',
author: { name: 'JB', from: 'Taiwan'},
data: [{'id': 1,prod: 'Book'}, {'id': 2,prod: 'Toy'}]
},
watch: {
title: function (newVal, oldVal) {
console.log('title', newVal, oldVal);
},
data: {
immediate: true, //"true" will also trigger callback(handler)
when initializing
deep: true, //Detect
nested value changes inside Objects,
handler: function (newVal, oldVal) {
console.log('data', newVal, oldVal);
}
}
},
mounted: function () {
this.title = "Hello,
world";
this.data[1].prod = "Clothe";
},
template: `
<div>
<h2>{{ title }}</h2>
<table class="table
table-hover">
<thead><tr>
<th>Id</th><th>Product</th>
</tr></thead>
<tbody>
<tr v-for="item in
data">
<th>{{ item.id }}</th>
<td>{{ item.prod
}}</td>
</tr>
</tbody>
</table>
<div><label
class="form-control">By {{ author.name }}, from {{ author.from }}
</label></div>
</div>
`
})
The
above example will show the result in console.
As
you can see, we didn’t set immediate option as true for “title”
watcher, so it didn’t show a changed log while initializing. But “data”
watcher did, so it showed the first log as changing from undefined to
the new value.
The
third log won’t show if the deep option was not set to true, since the “data”
prop is a nested object.
▋Watch certain property of a object
There are two ways to set a watcher
for an object’s certain property.
▋By computed
data: {
author: {
name: 'JB',
from: 'Taiwan'
},
},
watch: {
fromComputed: function (newVal, oldVal) {
console.log("author.from", newVal, oldVal);
}
},
computed: {
fromComputed: function () {
return this.author.from;
}
},
▋Intuitive way
data: {
author: {
name: 'JB',
from: 'Taiwan'
},
},
watch: {
'author.name': function (newVal, oldVal) {
console.log("author.name", newVal, oldVal);
}
}
▋Sample code
▌Reference
沒有留言:
張貼留言