watch:{}监听与 this.$watch()的区别:
watch:{} 一旦写出来,就不能被取消,除非组件销毁;
this.$watch() :可以直接调用watch的API和watch实现的功能是一样的 都是监听,但是这个可以随时随地取消
1,watch:{}的使用
// 监听BOS百度云上传失败的情况
watch: {
uploadedFailList: {
immediate: true,
handler(newV) {
if (newV.length >= 1) {
Toast('百度云上传失败,请重新选择并上传!');
}
},
},
},
2,this.$watch()的使用
this.$watch()可以写在声明周期里面 也可以写在method的方法里面;可以在需要监听的时候进行监听并卸载;非常好用;
this.$watch()会有这个返回值;可以调用这个返回值来取消监听;
/* 点击确认发布案例 */
async submitPublish() {
if (filterList.length === this.totalUploadedList.length) {
// 说明素材全部上传成功 否则还需要等待
console.log('等待素材上传成功中!');
} else {
// 开始启动监听 监听:totalUploadedList
let unwatch = this.$watch('totalUploadedList', (newV) => {
if (filterList.length === newV.length) {
console.log('所有文件都已经上传成功');
unwatch(); // 卸载监听
}
});
}
},