vue2.x中watch的使用监听immediatedeephandler

Posted 2022-05-19 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue2.x中watch的使用监听immediatedeephandler相关的知识，希望对你有一定的参考价值。

1、html部分

<p>单一值： showVal </p>
<p>对象属性值： objShowVal </p>
<p>纯数组值： cArrayShowVal </p>
<p>数组对象值： arrayObjShowVal </p>

<el-input v-model="val" placeholder="请输入单一值"></el-input>
<el-input v-model="obj.bc" placeholder="请输入对象属性值"></el-input>
<el-input v-model="cArray[0]" placeholder="请输入纯数组item值"></el-input>
<el-input v-model="arrayObj[0].bc" placeholder="请输入数组对象值"></el-input>

2、javascript部分

2.1、公共部分

export default 
	data() 
		return 
			val: "",
			showVal: "",
			obj: bc: "",
			objShowVal: "",
			cArray: [],
			cArrayShowVal: "",
			arrayObj: [bc: ""],
			arrayObjShowVal: "",
		;
	,
;

2.2、单一值监听

写法一：使用简单函数的方式，无法实现深度监听

watch: 
	val(val) 
		this.showVal = val;
		console.log("val:", val);
		console.log("showVal:", this.showVal);
	,
,

写法二：使用handler函数和deep: true属性实现深度监听和首次加载执行

watch: 
	val: 
		handler(val) 
			this.showVal = val;
			console.log("val:", val);
			console.log("showVal:", this.showVal);
		,
		// 首次加载执行
		// 如果不写或者值为false那么首次加载不会执行
		immediate: true,
		// 深度监听
      	// 此参数可以深度监听对象属性
      	// 不过监听对象属性还有其他方法
		deep: true,
	,
,

2.3、对象属性监听

写法一：直接使用普通函数监听对象属性

watch: 
	"obj.bc"(val) 
		this.objShowVal = val;
		console.log("val:", val);
		console.log("objShowVal:", this.objShowVal);
	,
,

写法二：使用handler函数监听对象属性

watch: 
	"obj.bc": 
		handler(val) 
			this.objShowVal = val;
			console.log("val:", val);
			console.log("objShowVal:", this.objShowVal);
		,
		deep: true,
		immediate: true
	,
,

2.4、纯数组监听

watch: 
	cArray(val) 
		this.cArrayShowVal = val[0];
		console.log("val:", val);
		console.log("cArrayShowVal:", this.cArrayShowVal);
	,
,

2.5、数组对象监听

报错，未找到解决方案。但是可以在改变数据的地方使用this.$forceUpdate()解决。

watch: 
	arrayObj: 
		hanler(val) 
			this.arrayObjShowVal = val[0].bc;
			console.log("val:", val);
			console.log("arrayObjShowVal:", this.arrayObjShowVal);
		,
		deep: true,
	,
,