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

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 有什么区别