Vue 中操作 data 的数组方法哪些可以触发视图更新?

本文介绍了Vue中如何通过数组方法触发视图更新,包括push、pop等会改变数组的方法,以及filter、concat等不会改变原数组的方法。同时,讨论了直接修改数组和长度无法触发视图更新的问题,并提供了使用this.$set或splice来解决这个问题的两种解决方案。了解这些知识将帮助开发者更好地实现Vue应用中的数据绑定和视图更新。

一、在vue中操作data的数组方法有以下几个方法可以触发视图更新:

        push()、pop()、shift()、unshift()、splice()、sort()、reverse()以上这些方法会改变被操作的数组;

         filter()、concat()、 slice()  这些方法不会改变被操作的数组,返回一个新的数组;

        以上方法都可以触发视图更新。

二、不能触发视图更新的方法有以下几种:

        利用索引直接设置一个数组项,例:this.array[index] = newValue

        直接修改数组的长度,例:this.array.length = newLength

        以上两种方法不可以触发视图更新;

三、有以下两种方法可以解决不能触发视图更新:

        解决方法 1: 可以用 this.$set(this.array,index,newValue) 或this.array.splice(index,1,newValue)

        解决方法 2: 可以用 this.array.splice(newLength)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值