Vue数组更新及过滤排序功能

Vue为了增加列表渲染的功能，增加了一组观察数组的方法，而且可以显示一个数组的过滤或排序的副本。本文将详细介绍Vue数组更新及过滤排序
前面的话

　　Vue为了增加列表渲染的功能，增加了一组观察数组的方法，而且可以显示一个数组的过滤或排序的副本。本文将详细介绍Vue数组更新及过滤排序

变异方法

　　Vue 包含一组观察数组的变异方法，它们将会触发视图更新，包含以下方法

push() 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度

pop() 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项

shift() 移除数组中的第一个项并返回该项，同时数组的长度减1

unshift() 在数组前端添加任意个项并返回新数组长度

splice() 删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员

sort() 调用每个数组项的toString()方法，然后比较得到的字符串排序，返回经过排序之后的数组

reverse() 用于反转数组的顺序，返回经过排序之后的数组

<div id="example"><div><button @click='push'>push</button><button @click='pop'>pop</button><button @click='shift'>shift</button><button @click='unshift'>unshift</button><button @click='splice'>splice</button><button @click='sort'>sort</button><button @click='reverse'>reverse</button></div><ul><li v-for="item in items" >{{ item.message }}</li></ul>
</div><script>
var example = new Vue({el: '#example',data: {items: [{message: 'Foo' },{message: 'Bar' },{message: 'Baz' }],addValue:{message:'match'}},methods:{push(){this.items.push(this.addValue)},pop(){this.items.pop()},shift(){this.items.shift()},unshift(){this.items.unshift(this.addValue)},splice(){this.items.splice(0,1)},sort(){this.items.sort()},reverse(){this.items.reverse()},}
})
</script>

非变异方法

　　变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方法，例如： filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组

concat() 先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组

slice() 基于当前数组中一个或多个项创建一个新数组，接受一个或两个参数，即要返回项的起始和结束位置，最后返回新数组

map() 对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组

filter() 对数组中的每一项运行给定函数，该函数会返回true的项组成的数组

<div id="example"><div><button @click='concat'>concat</button><button @click='slice'>slice</button><button @click='map'>map</button><button @click='filter'>filter</button></div><ul><li v-for="item in items" >{{ item }}</li></ul>
</div>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<script>
var example = new Vue({el: '#example',data: {items: ['Foo','Bar','Baz'],addValue:'match'},methods:{concat(){this.items = this.items.concat(this.addValue)},slice(){this.items = this.items.slice(1)},map(){this.items = this.items.map(function(item,index,arr){return index + item; })},filter(){this.items = this.items.filter(function(item,index,arr){return (index > 0); })}}
})
</script>

以上操作并不会导致Vue丢弃现有DOM并重新渲染整个列表。Vue实现了一些智能启发式方法来最大化DOM元素重用，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作

无法检测

　　由于JS的限制， Vue 不能检测以下变动的数组：

　　1、利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue

　　2、修改数组的长度时，例如： vm.items.length = newLength

<script>
var watchFunc = function(){example.message = '数据发生变化';setTimeout(function(){example.message = '';},500);
}
var example = new Vue({el: '#example',data: {items: ['Foo','Bar','Baz'],message:'',},watch:{items:watchFunc},methods:{pop(){this.items.pop()},setVal(){this.items[0]= 'match';},setLength(){this.items.length = 2;}}
})
</script>

以上代码中，直接设置值和长度使用watch不能检测到变化

　　以下两种方式都可以实现和vm.items[indexOfItem]=newValue相同的效果，同时也将触发状态更新
　　

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

　为了解决第二类问题，可以使用 splice
　

example1.items.splice(newLength)

<div id="example"><div><button @click='setVal1'>setVal1</button><button @click='setVal2'>setVal2</button><button @click='setLength'>setLength</button></div><ul><li v-for="item in items" >{{ item }}</li></ul> <p>{{ message }}</p>
</div>

<script>
var watchFunc = function(){example.message = '数据发生变化';setTimeout(function(){example.message = '';},500);
}
var example = new Vue({el: '#example',data: {items: ['Foo','Bar','Baz'],message:'',},watch:{items:watchFunc},methods:{setVal1(){Vue.set(this.items, 0, 'match')},setVal2(){this.items.splice(1, 1, 'xiaohuochai')}, setLength(){this.items.splice(2)}}
})
</script>

过滤排序

　　有时，要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性
【computed】

<div id="example"><ul><li v-for="n in evenNumbers">{{ n }}</li></ul>
</div><script>
var example = new Vue({el: '#example',data: {numbers: [ 1, 2, 3, 4, 5 ],},computed: {evenNumbers: function () {return this.numbers.filter(function (number) {return number % 2 === 0})}}
})
</script>

【methods】

　　在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 可以使用一个 method 方法
　　

<div id="example"><ul><li v-for="n in even(numbers)">{{ n }}</li></ul>
</div>

<script>
var example = new Vue({el: '#example',data: {numbers: [ 1, 2, 3, 4, 5 ],},methods: {even: function (numbers) {return numbers.filter(function (number) {return number % 2 === 0})}}
})
</script>

总结

以上所述是小编给大家介绍的Vue数组更新及过滤排序功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

Vue数组更新及过滤排序功能相关推荐

Vue 数组更新与排序过滤
前面的话 Vue 的核心是数据与视图的双向绑定,当我们修改数组时,Vue会检测到数据变化,所以用v-for 渲染的视图也会立即更新.Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示 ...
python-DRF_限流Throttling_自定义频率类_内置频率类使用_过滤排序功能
DRF-Django rest framework 认证权限频率 1. 限流Throttling 可以对接口访问的频次进行限制,以减轻服务器压力一般用于付费购买次数,投票等场景使用 1. 自定义频率 ...
Vue数组更新相关方法和过滤与排序的使用
Vue将被监听的数组进行了包裹,他们会触发视图更新,被包裹的方法包括:push(),pop(),shift(),unshift(),splice(),sort(),reverse(). 顺便提一下用于 ...
vue数组刷新_详解VUE 数组更新
1.数据方法分类: (1)原数组改变 push pop unshift shift reverse sort splice (2)原数组未变,生成新数组 slice concat filter 对于使 ...
Vue数组更新检测无效
Object.observe(),它可以异步观察Javascript中对象变化的方法,而无需你去使用一个其他的JS库.它允许一个观察者接收一个按照时间排序的变化记录序列,这个序列描述的是一列被观察的对 ...
【谨慎】Vue数组更新检测
变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse( ...
解决Vue数组更新不渲染的问题
当使用索引直接赋值和直接修改数组长度时,Vue不能检测出变动的数组. 这样写页面显示的是共0个 <span class="pull-right">已全部加载,共{{fi ...
vue数组更新不渲染页面
问题:当使用索引直接赋值和直接修改数组长度时,Vue不能检测出变动的数组. 原因: 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.it ...
【VUE】VUE数组更新
问题:当使用索引直接赋值和直接修改数组长度时,Vue不能检测出变动的数组. 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.arr[0] ...

Vue数组更新及过滤排序功能

Vue数组更新及过滤排序功能相关推荐

最新文章

热门文章