In vue, a watch in response to changes in the data. watch the usage of roughly three. The following code is the watch of a simple usage:
<input type="text" v-model="cityName"/>
new Vue({
el: '#root',
data: {
cityName: 'shanghai'
},
watch: {
cityName(newName, oldName) {
// ...
}
}
})
Write directly to a monitor handler, each time listening to cityName value changes, execute the function. String may be added directly behind the listener method name data:
watch: {
cityName: 'nameChange'
}
}
immediate and handler
A characteristic of this when using the watch, that is, when the value of the first binding, does not perform the function monitor, only the value changes will be performed. If we need to also perform the function when the first binding value, you need to use immediate property.
When traditional values such as when a parent component to child component dynamic, sub-assemblies props for the first time to get the default value of the parent assembly came also need to perform a function, then you need the immediate set to true.
new Vue({
el: '#root',
data: {
cityName: ''
},
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
immediate: true
}
}
})
Data objects behind the listener written form, it contains handler methods and immediate, before we write the function is in fact write the handler method;
When the immediate represents the first binding watch the time, whether handler, the value is true it means that when it was declared in the watch, immediately execute handler method, value is false, and the general use of watch, like changes in data before the execution handler.
deep
When the need to monitor the change of an object, conventional methods can not watch the object inside the monitored attribute change, only the data in the data to be able to monitor changes, then you need deep depth monitor object attributes.
<input type="text" v-model="cityName.name"/>
new Vue({
el: '#root',
data: {
cityName: {id: 1, name: 'shanghai'}
},
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
})
Set deep: true, you can listen to the changes cityName.name, in which case all of the properties will cityName are coupled with the listener, when a large object properties, changes in the value of each property will be executed handler. If you only need a monitor object property values, you can do the following optimization: Use a string monitor object properties:
watch: {
'cityName.name': {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
This will only give a particular attribute of an object plus listeners.
Change array (one-dimensional, multi-dimensional) do not need to monitor the depth, the object in the attribute change is required in the array of objects deep depth monitoring.