Vue中哪些数组方法会改变视图的更新

564 阅读2分钟

学习中很多时候搞不清vue中,哪些数组的方法可以实现数据更新,视图也会更新的情况

这些数组的方法,他们会改变原数组,在vue中会实现数据更新,视图也会及时更新

主要的原因是,这些方法可以改变原数组下面的梳理的这几个,是我目前遇到可以实现数据更新视图更新的,也欢迎大家补充!

1.push()方法在数组的尾部添加一个或多个元素,并返回数组新的长度。

2.pop()方法删除数组的最后一个元素,会减小数组长度并返回它删除的值。

3.unshift()方法在数组的头部添加一个或多个元素,并返回数组新的长度。

4.shift()方法删除数组的第一个元素,然后把所有随后的元素前移一个位置来填补数组头部的空缺,并返回删除的元素。

5.splice(start)方法在数组中插入或删除元素的通用方法。

这个方法我挺喜欢的,增删改查的功能他都能实现,哈哈哈!

arr.splice(1,1) 从索引1的位置开始删除一个元素,具体的使用方法还有很多,可以去mdn上面看

6.sort()方法将数组中的元素排序,并返回排序后的数组。 默认排序顺序是在将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列时构建的,也可以使用下面的方法进行冒泡排序

 var numbers = [4, 2, 5, 1, 3];
    numbers.sort(function(a, b) {
      return a - b;
    });
    console.log(numbers);

7.reserve()将数组进行翻转,并返回该数组,会改变原来的数组

但是,不是所有可以更改原数组的方法,就可以实现vue中视图的更新

比如下面的代码

export default {
  name: 'VueDemoApp',
  data() {
    return {
      arr: ['red', 'yellow', 'green'],
    }
  },
  mounted() {},
  methods: {
    // 直接更改数组的索引值,不会导致视图的更新
    fn(){
      this.arr[0]="pink"
      this.arr.length=0//这个也不会更新数组
    }
    // 有操作索引的需求可以这样写
    // this.$set(数组,索引,新的值)
    //想要更改数组中某个位置的值,实现视图更新,可以选用下面的方法
    fn1() {
      this.$set(this.arr, 1, 'pink')
    },
    // $set这个方法完全可以用splice代替使用,我个人不喜欢使用this.$set
    fn3() {
      this.arr.splice(1, 1, 'pink')
    },
  },
}

像ES6新增的数组的filter,concat,slice这三个由于这几个api是返回一个新的数组,并不会影响原始的数组,所以要用赋值 覆盖掉旧的数组才能让视图更新, //   this.arr = this.arr.filter(item => item.length > 3)//实质上也是对原数组进行了修改的。 希望对大家的学习有帮助!