How to Watch for Nested Changes in Vue
📣 Sponsor
Vue is a reactive language, meaning when the data changes, we can automatically have that represent itself in the HTML. To help us with this, we can use watchers in vue to watch for a change in data, and then do something to the HTML, or send a message to the user about it.
This works fine for simple datasets, but if we start to have data which is deeper than one level, it becomes harder to watch it properly for changes.
Watching for Nested Data Changes in Vue
To understand a little about this issue, we need to understand how watchers work in Vue. Vue only watches for shallow changes For example, below, we watch for changes in count
, and console.log
those changes:
<script>
export default {
data() {
return {
count: 1
}
},
watch: {
count(data) {
console.log(data);
}
}
}
</script>
<h1></h1>
<button @click="++this.count">
Click Me
</button>
Every time the user clicks on the button, we ++this.count
, and our watcher watches for any changes in count
. It then console
logs the data, so we can see the new count value. That means any time the button is clicked, the value of count is shown on the console log.
However, shallow changes means Vue only checks for changes in that properties value. If we have data more than one level deep, Vue will not check for updates. For exmaple, updating count.number
below will not trigger our watcher for count
, since Vue simply doesn’t check for any changes deeper than count
:
data() {
return {
count: {
number: 1,
type: 'number'
}
},
watch: {
// This doesn't get triggered when count.number!
count(data) {
console.log(data);
}
}
}
Instead, we need to mention specifically which element is changing. We can continue to watch for changes in count.number
above by changing our watcher to watch for count.number
:
data() {
return {
count: {
number: 1,
type: 'number'
}
},
watch: {
// This gets triggered when count.number changes!
"count.number" : function(data) {
console.log(data);
}
}
}
Using the above method, we can easily check for changes in properties within properties, so that we can fire the appropriate watchers, but it can get messy. If we want to simply watch for any count
changes, we need to use the deep property.
Using the deep property
The deep property can be added to any watcher, and it forces Vue to watch for any change within a specific data property. This means we have to write our watcher
a little differently:
data() {
return {
count: {
number: 1,
type: 'number'
}
},
watch: {
count: {
handler(data) {
console.log(data);
},
deep: true
}
}
}
Now whenever any property within count
changes, the count
watcher will fire. When we console.log(data)
this time, the entire count
object will be console logged, i.e. { number: 1, type: 'number' }
.
This is a lot easier than targetting specific properties within properties, but it is costly. Since Vue has to go through each property every time, this can cause serious performance issues for very large objects. As such, only use this if you have a known object of small size. For other situations, stick to targetting specific properties, like count.number
.
More Tips and Tricks for Vue
- Creating your first Vue App
- How to use Teleport in Vue to Move Parts of Templates
- The difference between created and mounted in Vue
- Globally Registering Vue Components
- Creating a Reusable Tab Component in Vue
- Vue Tips: Dynamic CSS with Vue Reactive Variables
- Getting Started with Storing Vue Data in Vuex
- Vue Tips: Optimize your Vue Apps with v-once and v-memo
- How to Watch for Nested Changes in Vue
- How to use v-for in Vue