Basic usage:
When fullName value changes, watch and listen to execute
FullName: {{fullName}}
FirstName:
new Vue({
el: '#root',
data: {
firstName: 'Dawei',
lastName: 'Lou',
fullName: ''
},
watch: {
firstName(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
}
}
})
handler method immediate property and
the above example is the change in the value of time, watch it execute, when we want to watch on the implementation of the initial value on the use of the handler and immediate property
Watch: {
firstName: {
handler (newName, in oldName) {
this.fullName newName = + '' + this.lastName;
},
// declared after the representative firstName this method was immediately go wacth handler execution method, if provided false, the effect is the same as example and upper
immediate: to true
}
}
deep property (depth monitor, change the following attributes of an object common language)
obj.a: {{obj.a}}
obj.a:
new Vue({
el: '#root',
data: {
obj: {
a: 123
}
},
watch: {
obj: {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true
}
}
})
When we change the value of the input data obj.a in view of the input box, we found to be invalid. Modern JavaScript limitations (and abandoned Object.observe) by, Vue can not detect an object to add or delete attributes. Since the Vue will perform on the property getter / setter conversion process, so the property must be present on the data object when initializing instance Vue conversion to make it, so as to let it be the response.
By default handler only listen obj attribute this change to its references, we only have to assign obj when it will listen to, for example, we were reassigned to obj mounted hook function in the event:
mounted: {
this.obj = {
A: '456'
}
}
So we need to monitor the value of a property in obj it? This time comes in handy deep properties:
Watch: {
obj: {
Handler (newName, in oldName) {
the console.log ( 'obj.a changed');
},
immediate: to true,
deep: to true
}
}
Such a great influence on the performance of the method, any modification obj inside a property will trigger the listener where the handler. We can do the following process:
Watch: {
'obj.a': {
Handler (newName, in oldName) {
the console.log ( 'obj.a changed');
},
immediate: to true,
// Deep: to true
}
}
watch here is not in the write-off to say, the actual development, will watch as the components together destroyed.
Author: a Xiaolei _
Links: https://www.jianshu.com/p/b70f1668d08f
Source: Jane book
Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.