- 基础用法
1.变量监听
<input type="text" v-model="name" />
{{watchName}}
export default {
name: 'HelloWorld',
data () {
return {
name: '',
watchName:''
}
},
watch: {
name (val) {
this.watchName = val;
}
}
}
当然我们也可以写一个监听处理函数,当每次监听到变量发生变化时执行函数。代码如下:
watch: {
// name (val) {
// this.watchName = val;
// },
name: 'nameChange'
},
methods: {
nameChange () {
this.watchName = this.name;
}
}
2.对象监听
<input type="text" v-model="formItem.name" />
{{watchObjName}}
'formItem.name' (val) {
this.watchObjName = val;
}
也可以借助 computed 计算属性来完成。
watch: {
newName (val) {
this.watchObjName = val;
}
},
computed: {
newName () {
return this.formItem.name;
}
},
- immediate 和 handler
上面介绍的 watch 的用法有个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值得时候也执行函数,就需要用到 immediate 属性。
name: {
handler (val) {
this.watchName = val;
},
immediate: true
}
监听的数据不再像之前一样写,而是写成对象的形式,包含 handler 和 immediate ,之前我们写的函数其实就是写在这个 handler 方法;immediate 表示在 watch 中首次绑定数据的时候是否执行 handler ,值为 true 则表示在 watch 声明的时候就立即执行 handler 方法,值为 false 时,则和一般使用 watch 一样,在数据发生变化的时候才执行 handler。
- deep
当需要监听复杂的数据类型(对象)的改变时,普通的 watch 方法无法坚挺到对象内部属性的改变,只有 data 中的数据才能监听到变化,此时就需要使用 deep 属性对对象进行深度监听。
data () {
return {
person: {
id: 1,
name: '沐'
}
}
}
watch: {
person: {
handler (val) {
console.log('深度监听:', val);
},
deep: true
}
}
设置了 deep 为 true ,可以监听到 person.name 的变化,但是这种写法会给 person 的所有属性都加上这个监听器,当对象属性较多时,每个属性值得变化都会执行 handler 。如果只需要监听对象中一个属性的值,则可以使用字符串的形式监听对象属性,也就是上面介绍的对象监听。
转载
作者:沐沐923
链接:https://www.jianshu.com/p/9524eca3cb43
来源:简书