一、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直接改变数组长度时,监听失效,双向绑定无效,视图不更新# 三、总结

Logo

前往低代码交流专区

更多推荐