Vue中对数组变化监听

312 字

2 分钟

Vue中对数组变化监听

2024-12-27

Vue

前言#

我们在实际开发中，经常要对数组进行操作，最为常见的方法就是直接对数组中的某个元素进行赋值，比如下面这样的：

1
<script>
2
    export default {
3
        data() {
4
            return {
5
                comments: [],
6
                isReply: [0, 0, 0, 0, 0]
7
            };
8
        },
9
        methods: {
10
            replyTo: function (index) {
11
                console.log(this.isReply);
12
                isReply[index] = 1
13
                console.log(this.isReply);
14
            }
15
        },
16
    };
17
</script>

但是虽然数组中的元素改变了，但是vue却不能监听到变化，同时我们引入watch来检测也是没有效果，如下所示

1
<script>
2
    export default {
3
        data() {
4
            return {
5
                comments: [],
6
                isReply: [0, 0, 0, 0, 0]
7
            };
8
        },
9
      watch: {
10
        isReply: {
11
          handler(val, oldval) {
12

13
          },
14
          deep: true
15
        }
16
      },
17
        methods: {
18
            replyTo: function (index) {
19
                console.log(this.isReply);
20
                isReply[index] = 1
21
                console.log(this.isReply);
22
            }
23
        },
24
    };
25
</script>

从上述例子，我们发现vue是不会响应数据变化而重新去渲染页面。在vue中仅需要通过修改赋值语句的方式，即可让vue响应数组数据的变化。具体操作如下：

1
Vue.set(vm.items, indexOfItem, newValue)
2

3
// Array.prototype.splice
4
vm.items.splice(indexOfItem, 1, newValue)

具体案例如下

1
<script>
2
    import Comment from '../components/Comment'
3

4
    export default {
5
        data() {
6
            return {
7
                comments: [],
8
                isReply: [0, 0, 0, 0, 0]
9
            };
10
        },
11
        watch: {
12

13
        },
14
        components: {
15
            Comment
16
        },
17
        methods: {
18
            replyTo: function (index) {
19

20
        // 最后一个参数为我们需要改变的值
21
                this.isReply.splice(index, 1, 1);
22

23
                this.$set(this.isReply, index, 1);
24

25
            }
26
        },
27
    };
28
</script>

Vue中对数组变化监听

http://localhost:4321/posts/vue/vue中对数组变化监听/

发布于

2024-12-27

许可协议

CC BY-NC-SA 4.0

1

前言