Vue中$watch()方法和watch属性的区别

最新推荐文章于 2024-07-05 16:27:23 发布

儒雅的烤地瓜

最新推荐文章于 2024-07-05 16:27:23 发布

阅读量1.1k

点赞数 11

分类专栏： Vue.js 文章标签： vue.js javascript watch deep immediate 深度监听监听函数

本文链接：https://blog.csdn.net/sunyctf/article/details/135323713

版权

Vue.js 专栏收录该内容

61 篇文章 25 订阅

订阅专栏

本文详细比较了Vue中$watch()和watch对象的使用，指出它们在监听值和对象属性变化上的差异，并通过实例演示了如何正确监听对象及启用深度监听。

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

vue中$watch()和watch属性都是监听值的变化的，是同一个作用，但是有两个不同写法。

用法一：

//注意：这种方法是监听不到对象的变化的。
this.$watch((newVal,oldVal)=>{ })

用法二：

watch:{
    xxx:(newVal,oldVal)=>{ // xxx是data里的数据
    
    }
    // 写法二：对象方法的简写
    // xxx(newVal,oldVal){ // xxx是data里的数据
    
    // }
}

//监听对象某个值的变化 
watch:{
    "xxx.value":（newVal,oldVal)=>{ // xxx.value是data里对象的value
    
    }
    // 写法二：对象方法的简写
    // "xxx.value"(newVal,oldVal){ // xxx.value是data里对象的value
    
    // }
}

举个栗子：

<template>
	<div>   
		<input type="text" v-model="name">
		{{name}}
		<input type="text" v-model="age">
		{{age}}
		<input type="text" v-model="obj.id">
		{{obj.id}}
		<input type="text" v-model="obj">
		{{obj}}
	</div>
</template>
<script>
	export default {
		name: "Home",
		data() {
			return {
				name: "",
				age: "",
				obj: {
					id: "1",
					addr: "gz"
				}
			};
		},
		created() {
			this.obj = {
				id: "99",
				addr: "gd"
			}
			// 用法一：  this.$watch("要监听的值",(oldVal,newVal)=>{ })
			this.$watch("name", (newValue, oldValue) => {
				console.log(newValue + "_新值");
				console.log(oldValue + "_旧值");
			});
			//这样监听不到对象的变化的
			this.$watch("obj", (newval, oldval) => {
				console.log(newval);
				console.log(oldval);
			});
		},
		//用法二：
		watch: {
			age: (newValue, oldValue) => {
				console.log(newValue);
				console.log(oldValue);
			},
			// 监听对象中的某个属性的变化
			"obj.id": (newVal, oldVal) => {
				console.log(newVal);
				console.log(oldVal);

			},
			//深度监听
			obj: {
				handler(newVal, oldVal) {
					console.log(newVal);
					console.log(oldVal);

				},
				//开启深度监听
				deep: true,
				//页面初始化立即执行
				immediate: true
			}
		},
	};
</script>
<style lang="css" scoped>
</style>

☀ 参考资料

浅谈Vue中监听属性—watch监听器的使用方法

vue - watch:{}监听与 this.$watch()的区别 | this.$watch 和组件的 watch 有什么区别