各位小伙伴今天让我们一起来了解Watch我们这个经常用到它的一些用法,例子
<div>
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
</div>
new Vue({
el: '#sina',
data: {
firstName: 'Chen',
lastName: 'Sina',
fullName: ''
},
watch: {
firstName(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
}
}
})
当我们看到这个例子的watch时,这是我们最普遍的用法,当firstName变化时,就会触发watch监听,监听每次修改变化的新值,然后fullName进行修改操作。注意:这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行,若你的需求是最初绑定值的时候也执行函数,则就需要用到immediate属性如下
- handler方法和immediate属性
当你父组件向子组件动态传值时,子组件的props首次获取到父组件传过来的默认值,也需要执行此监听函数时,此时就需要immediate改为true
//顺便让你们理解一下props的规范写法
props:{
goodsData:{
required: false, //可以使用required选项来声明这个参数是否必须传入。
type: Array,
default:()=>[] //数组类型
},
batchShow:{
required:false,
type:Boolean,
default:false //布尔类型
},
firstName:{
required:false,
type:String,
default:'' //String类型
}
},
watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true
}
}
注意到handler这个方法了吗,我们给 firstName 绑定了一个handler方法,之前我们的写法是省略写法,现在这个是完整的写法,因为watch 方法其实默认写的就是这个handler方法的。
immediate:true 立即执行---代表我们在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行
- deep属性
watch 里面还有一个属性 deep,默认值是 false,代表是否深度监听
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
<input type="text" v-model="goods.price"/>
new Vue({
el: '#sina',
data: {
goods:{
number:1,
price:100,
}
},
watch: {
goods: {
handler(newval, oldval) {
// 进行对应的操作
},
deep: true,
immediate: true
}
}
})
- 设置deep: true 则可以监听到goods.price的变化,但是此时会给goods的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。这样则会对我们的性能增加极大的负担,所以如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:
watch: {
'goods.price': {
handler(newval, oldval) {
// 进行操作
},
deep: true,
immediate: true
}
}
这样优化就大大提升了性能,欢迎各位小伙伴有问题多多沟通呀