分类解析vue中watch的用法:

	1)数据类型
	2)deep immediate
 ** 1. 普通数据类型:**
		 <input type="text" v-model="userName"/>  
		//监听   当userName值发生变化时触发
		watch: {
			userName (newName, oldName) {
				console.log(newName)
			}
		}
		
		watch: {
			userName: {
				handler (newName, oldName) {
					console.log(newName)
				},
				immediate: true
			}
		}
缺点:
只有一个缺点 就是当值第一次绑定的时候 不会执行监听函数,只有当值改变的时候 才会执行
如果我们想在第一次绑定的时候执行此监听函数 则需要 设置 ** immediate为true**




 ** 2.  对象类型:**
 当需要监听对象的改变时,此时就需要设置deep为true
 第三种
		<input type="text" v-model="cityName.name" />
		data (){
			return {
				cityName: {name:'北京'}
			}
		},
		watch: {
			cityName: {
				handler(newName, oldName) {
					console.log(newName)
				},
				immediate: true,
				deep: true
			}
		}
		注意点:如果对象的属性较多,可以之监听某一个属性	'cityName.name':
		
		
 ** 3.  数组类型:**
	数组的变化不需要深度监听

**注意点:**
	在watch中不要使用箭头函数,因为箭头函数中的this是指向当前作用域

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐