vue2.x中watch的使用、监听、immediate、deep、handler

1、HTML部分

<p>单一值：{{ showVal }}{ objShowVal }}{ cArrayShowVal }}{ arrayObjShowVal }} 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, }, },