本文详细介绍了Vue.js中watch特性，包括如何监听普通变量和对象的变化，以及在面包屑和处理异步数据更新的应用场景。通过实例演示了如何设置回调函数和深度监听，并提供了解决异步问题的两种方法：添加flag和数据变化监听。
一、用法
1.监听普通变量
watch:{
name（cur,old）{
console.log(cur,old)
},
'name'（cur,old）{
console.log(cur,old)
},
name: function（cur,old）{
console.log(cur,old)
},
}
2.监听对象
watch:{
'obj.name'(cur,old){
console.log(cur,old)
},
obj:{
handler:cur,old)=>{ //内置函数
console.log(cur,old)
},
deep: true //深度监听
}
}
（注意：监听数组或者对象时，cur和old是相等的，因为这两个形参指向一个数据对象；
所以尽量监听具体变量）
二、应用场景
1.面包屑
breadcrumb.vue组件中
2.异步导致数据无法获取的处理方式
1）添加flag标记
需要等异步请求结果的来渲染的html部分v-if=“flag”
请求返回200后flag标记为true
2）监听数据变化
watch:{
items( cur , old ){
this.items = cur
}
}
扫一扫
1056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
