简单使用:当每次监听到 name值发生改变时,执行函数
new Vue({
el: '#App',
data: {
name: 'ni'
},
watch: {
name(newV, oldV) {
// ...
}
}
})
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行
像上面方式使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。
new Vue({
el: '#App',
data: {
name: 'ni'
},
watch: {
name(newV, oldV) {
// ...
immediate:true
}
}
})
deep
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
new Vue({
el: '#root',
data: {
this.listDataDetail = [
{id: '1', name: '出库单号', right: 'ck11122222222222222'},
{id: '20', name: '经销商', SpecialSymbols: '*', icon: 'icon-bianji'},
{id: '2', name: '出库类型', SpecialSymbols: '*', icon: 'icon-bianji'},
{id: '3', name: '制单人', SpecialSymbols: '*', icon: 'icon-bianji'}]
},
watch: {
listDataDetail : {
handler(newName, oldName) {
// ...
},
deep: true,
}
}
})
设置deep: true 则可以监听到listDataDetail.name的变化,此时会给listDataDetail的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:
new Vue({
el: '#root',
data: {
this.listDataDetail = {id: '1', name: '出库单号', right: 'ck11122222222222222'},
},
watch: {
'listDataDetail.name': {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
}
})
这样只会给对象的某个特定的属性加监听器。
数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。