---

title: vue-watch数组和对象
date: 2017-03-21

• vue
• watch

---

本文通过示例介绍vue如何监听数组和对象的变化。

vue-watch数组和对象

watch数组

参考链接

数组更新检测

重新赋值

初始值：array = [1,2,3];

给array赋值：array = [2];（通过watch可以监听到数组被改变）

操作数组

这部分仅支持通过下列方法操作数组

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

注意事项

将一个新的数组赋值给变量，callback函数中的oldVal和newVal分别是“原数组”和“新数组”；
通过方法操作数组，callback函数中的oldVal和newVal都是“新数组”；
如果数组中的元素是数组，则元素数组的变化同样会被监听到（[[[[]]]],支持深层监听，最内层的变化也能监听到），但其他类型元素不会默认监听（[{}],如数组中的对象不会深层监听）；
除了以上列举的操作数组的方法，vue不监听其它方法，如：

• array[index]=newVal;
• array.length = newVal;
• Array.prototype.someMethod.applay();

变通方法

针对array[index]=newVal可采用Vue.set(array, index, newValue)或者array.splice(index, 1, newValue)代替；

针对array.length=newVal可采用array.splice(newLength)代替；

watch对象

参考链接

watch选项

实例watch

响应式原理/变化检测

watch选项

watch选项”watch vue实例data中的“对象属性”变化：

watch: {  
    obj: {  
      handler: function (newVal, oldVal) { /* ... */ },  
      deep: true  
    }  
  }  

实例watch

vue实例watch data中的“对象属性”变化：

vm.$watch(
        'obj',
        function (newVal, oldVal) {
         /* ... */ 
        },
        {
          deep: true
        }
      )

注意事项

watch对象属性的变化时，handler函数接收的newVal和oldVal都是变化以后的对象；
vue仅watch对象的初始化属性，在过程中添加的属性不会被watch；
vm.$watch方法第一个参数必须是引号引起来的数据变量名或者一个function：

data() {  
      return{  
        obj: {  
            a:0  
        }  
      }  
    },  
mounted(){    
    this.$watch(    
        'obj',  //此obj为data中的变量，或者function(){return this.obj}  
        function (newVal, oldVal) {  
            /* ... */   
        },  
        {  
          deep: true  
        }  
      )  
    }  

变通方法

如果希望在过程中添加响应式对象属性，则可通过Vue.set(obj,'propetyName',val)或者vm.$set(obj,'propetyName',val);

如果希望在过程中批量添加响应式对象属性，可采用this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })；此时，handler函数接收的oldVal是原obj，newVal是变化后的obj；

应用举例

监听数组中对象的变化：

data（）{  
    return {  
        arr: [  
            {  
               a:0  
            },  
            {  
               a:1  
            }  
        ]   
    }  
}，  
mounted(){  
    let _self = this;  
    _self.arr.forEach(function(obj,index){  
         _self.$watch(  
            function(){ return _self.arr[index] },  
            function(newVal,oldVal) { /*......*/ },  
            { deep: true }  
        );   
    });  
}  

说明：配置了deep为true后，vue会监听对象属性的变化，如果对象属性是引用类型的，则会深入监听，深入监听的规则与以上监听数组、对象规则一致，如：

arr: [  
          {  
            a:{  
              b:{  
                c:[]  
              }  
            }  
          },  
          {  
            a:1  
          }  
        ]  

arr[0].a.b.c.push(3);会被监听到

vm.$set(vm.arr[0].a.b,'propetyName',val);会被监听到

等等……

总结

1 如果监听数组，则该数组下面的所有元素数组及元素数组下面的元素数组均会被监听，其它类型的元素则没有默认监听，如：数组下面的对象元素；
2 如果监听对象，且deep为true，则该对象下面的“数组属性”和“对象属性”均会被监听（深层监听），包括数组下面的对象元素；
3 可通过Vue.set或者array.splice等方法实现想要的监听效果；