学习中很多时候搞不清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)//实质上也是对原数组进行了修改的。 希望对大家的学习有帮助!