一、vue可以监听到数组的方式

1、通过this.$set改变简单数组指定位置的值

<button @click="changeArr">改变数组index=2的值</button>

<div v-for="item in arr">{{item}}</div>

export default{
    data(){
        return {
            arr: [0, 1, 2, 3]
        }
    },
    watch: {
      arr(val){
        console.log(val)
      },
    },
    methods: {
      changeArr(){
        this.$set(this.arr, '2', 222222)
      },
    }  
}

结果为：

2、通过this.$set改变对象数组指定位置的值

<button @click="changeArrObj">监听数组对象</button>

<div v-for="item in arrObj">
  姓名：{{item.name}}, 年龄：{{item.age}}
</div>

export default{
    data(){
        return {
             arrObj: [
                  {name: 'bob1', age: 11},
                  {name: 'bob2', age: 12},
                  {name: 'bob3', age: 13},
                  {name: 'bob4', age: 14},
            ],
        }
    },
    watch: {
        arrObj: {
            handler(val){
                console.log(val)
            },
            deep: true
        }
    },
    methods: {
        changeArrObj(){
            this.$set(this.arrObj[0], 'name', 'bob000')
            this.$set(this.arrObj, '2', {name: 'bob2222', age: 22222})
        },
    }  
}

结果如下：

3、通过数组的push、pop、shift、unshift、splice、sort、reverse等方法改变数组

二、vue无法监听到数组变化的情况

1、通过下标直接改变数组指定位置的值时，监听失效、双向绑定无效

<button @click="changeArr">改变数组index=2的值</button>

<div v-for="item in arr">{{item}}</div>

export default{
    data(){
        return {
            arr: [0, 1, 2, 3]
        }
    },
    watch: {
      arr(val){
        console.log(val) // 监听失效
      },
    },
    methods: {
      changeArr(){
        // 此方式虽然数组index=2的值更新了，但不会触发视图的更新
        this.arr[2] = 222222
        console.log(this.arr)

        // 可以使用以下方式进行修改：
        // this.$set(this.arr, '2', 222222) //方式 1
        // this.arr.splice(2, 1, 222222) //方式 2
      },
    }  
}

结果显示如下：

2、通过length直接改变数组长度时，监听失效，双向绑定无效

<button @click="changeArr">改变数组长度为2</button>

<div v-for="item in arr">{{item}}</div>

export default{
    data(){
        return {
            arr: [0, 1, 2, 3]
        }
    },
    watch: {
      arr(val){
        console.log(val) // 监听失效
      },
    },
    methods: {
      changeArr(){
        // 此方式虽然数组index=2的值更新了，但不会触发视图的更新
        this.arr.length = 2
        console.log(this.arr)

        // 可以使用以下方式进行修改：
        this.arr.splice(2)
      },
    }  
}

结果显示如下：

三、总结

1、改变数组（简单数组，数组对象）指定位置的值，可以通过this.$set，这样可以监听到数组的变化，且视图可以实时更新
2、改变数组（简单数组，数组对象）的长度，可以使用splice，这样可以监听到数组的变化，且视图可以实时更新
3、通过下标直接改变数组指定位置的值时，监听失效、双向绑定无效，视图不更新
4、通过length直接改变数组长度时，监听失效，双向绑定无效，视图不更新# 三、总结