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