new Vue({
el: '#root',
data: {
return {
form: {
address: {adresscountryoption:'',adresscityoption:'',adresscountyoption:''},
place: {placecountryoption:'',placecityoption:'',placecountyoption:''},
},
adresscountryoption:[],
adresscityoption:[],
adresscountyoption:[],
placecountryoption:[],
placecityoption:[],
placecountyoption:[],
},
},
watch: {
adresscountryoption(newName, oldName) {
console.log(newName);
console.log(oldName);
}
}
})
这是最常规的监听
上面的例子是值变化时候,watch才执行,我们想让值最初时候watch就执行就用到了handler
和immediate
属性
watch: {
adresscountryoption: {
handler(newName, oldName) {
},
immediate: true, // 代表在wacth里声明了adresscountryoption这个方法之后立即先去执行handler方法,如果设置了false,那么效果和上边例子一样
}
}
还有深度监听deep
watch: {
form: {
handler(newName, oldName) {
console.log(form.address.adresscityoption);
},
immediate: true,
deep: true
}
}
这样的方法对性能影响很大,修改form里面任何一个属性都会触发这个监听器里的 handler。我们可以做如下处理
watch: {
'form.address.adresscityoption': {
handler(newName, oldName) {
console.log(newName);
},
immediate: true,
// deep: true
}
}