vue watch (深度监听)data多层属性
当我们的data属性是有两层以上的时候,我们写watch监听内层属性的变化,普通watch就会报错。
假设我们的代码如下:
<div>
<p>FullName: {{name.fullName}}</p>
<p>FirstName: <input type="text" v-model="name.firstName"></p>
</div>
new Vue({
el: '#root',
data: {
name:{
firstName: '张',
lastName: '三',
fullName: ''
}
},
watch: {
name.firstName(newName, oldName) {//此处会报错
this.name.fullName = newName + ' ' + this.name.lastName;
}
}
我们使用深度监听优化之后
<div>
<p>FullName: {{name.fullName}}</p>
<p>FirstName: <input type="text" v-model="name.firstName"></p>
</div>
new Vue({
el: '#root',
data: {
name:{
firstName: '张',
lastName: '三',
fullName: ''
}
},
watch: {
name: {
handler(newName, oldName){//name属性内部属性发生变化之后,会先执行handler方法
this.name.fullName = newName.firstName + ' ' + this.name.lastName;
},
immediate: true//深度监听不许添加这个属性
}
}