Vue-------watch浅监听和深监听

最新推荐文章于 2024-03-07 14:42:07 发布

m0_46639194

最新推荐文章于 2024-03-07 14:42:07 发布

阅读量242

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_46639194/article/details/125456536

版权

本文介绍了Vue中watch的浅监听和深监听的区别。浅监听仅能检测到数组数量的变化，无法捕获数组内对象属性的修改。而深监听通过设置`deep:true`，能够监听到数据结构内部的任何变化，包括对象属性的增删改。在示例中，使用了uni.setStorage进行数据存储，展示了两种监听方式在数据变更时的响应情况。

摘要由CSDN通过智能技术生成

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
	}
}