Vue-------watch浅监听和深监听
浅监听
data() {
return {
stu: [
{ name: '张三丰', grade: 100 },
{ name: '张无忌', grade: 88 },
{ name: '张翠山', grade: 66},
]
}
},
watch: {
stu(){
//浅监听
console.log('stu被改变了');
uni.setStorage({
key: 'stu',
data: this.stu,
success() {
console.log('success');
}
})
},
}
浅监听是函数的形式,且只能够监听数据的数量变化,而不能够监听数据内部的数据的变化
如:此时如果在stu数组中添加了一个新的数据,则可以监听到,但是如果改变了原有数据中name或grade的内容,则监听不到
深监听
data() {
return {
stu: [
{ name: '张三丰', grade: 100 },
{ name: '张无忌', grade: 88 },
{ name: '张翠山', grade: 66},
]
}
},
watch: {
stu:{
//深监听
handler(){
console.log('stu被改变了');
uni.setStorage({
key: 'stu',
data: this.stu,
success() {
console.log('success');
}
})
},
//deep是true时,表示深监听打开
deep: true
}
}
深监听是对象的形式,且有handler函数和deep组成,当deep是true时表示深监听打开
深监听可以不仅可以监听到数据的数量的变化,同时也可以监听到数据内部内容的变化