vue数组变化侦测详解

数组变化侦测​

变更方法​

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

 

let arr = ['a', 'b', 'c', 'd']
console.log(arr)  // ["a", "b", "c", "d"]
console.log(arr.push('new')) //6
console.log(arr) // ["a", "b", "c", "d", "new"]

   

let arr = ['a', 'b', 'c', 'd']
console.log(arr)  // ["a", "b", "c", "d"]
console.log(arr.pop()) //d
console.log(arr) // ["a", "b", "c"]

   

let arr = ['a', 'b', 'c', 'd']
console.log(arr)  // ["a", "b", "c", "d"]
console.log(arr.shift()) //a
console.log(arr) // ["b", "c", "d"]

   

let arr = ['a', 'b', 'c', 'd']
console.log(arr)  // ["a", "b", "c", "d"]
console.log(arr.unshift('new')) //6
console.log(arr) // ["new","a", "b", "c", "d"]

 

第一个参数：表示从哪个索引位置（index）添加/删除元素

第二个参数：要删除的项目数量。如果设置为 0，则不会删除项目。

第三个参数：可选。向数组添加的新项目。

例:splice(1);保留前一个元素之后的全部删除，splice(2);保留前两个元素之后的全部删除

let arr = ['a', 'b', 'c', 'd']
arr.splice(2)
console.log(arr) //["a", "b"]

例:splice(2, 1) 从索引位置(index:2)删除，删除一个元素

let arr = ['a', 'b', 'c', 'd']
arr.splice(2, 1)
console.log(arr) // ["a", "b", "d"]

例:splice(1,2,‘a’,‘b’) 从索引位置(index:1)删除，删除2个元素，并添加2个新元素来替代被删除的元素

let arr = ['a', 'b', 'c', 'd']
arr.splice(1, 2, '1', '2')
console.log(arr) // ["a", "1", "2", "d"]

例:splice(1,0,‘a’)从索引位置(index:1)添加，添加两个元素

let arr = ['a', 'b', 'c', 'd']
arr.splice(1, 0, '1', '2')
console.log(arr) // ["a", "1", "2", "b", "c", "d"]

 

arr.sort(sortby) 可选。规定排序顺序。必须是函数。

let arr = ['e', 'a', 'c', 'b', 'd']
arr.sort()
console.log(arr) //["a", "b", "c", "d", "e"]

例:字母顺序进行排序

function sortNumber (a, b) {
  return a - b
}
let arr = [10,5,40,25,1000,1]
arr.sort(sortNumber)
console.log(arr) // [1, 5, 10, 25, 40, 1000]

   

let arr = ['a', 'b', 'c', 'd']
arr.reverse()
console.log(arr) // ["d", "c", "b", "a"]

可以理解为使用使用上面方法改变数组时，页面会及时体现这种变化。

替换数组

它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
 

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

concat() 方法用于连接两个或多个数组。

slice() 方法可从已有的数组中返回选定的元素。

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/157/1063.html

很赞哦！ (0)