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>
<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
<div id="example">
<div>
<button @click='setVal'>setVal</button>
<button @click='setLength'>setLength</button>
<button @click='pop'>pop</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:{
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引入远程JS文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
在现代Web开发中,数据安全是一个不可忽视的重要环节,Vue.js作为一个流行的前端框架,不仅提供了强大的数据绑定和组件化功能,还支持与各种后端服务的集成,本文将探讨如何在Vue应用中使用MD5算法来加密数据,从而提升应用的安全性,需要的朋友可以参考下2024-10-10
飘窗，即一个类似小窗子的在网页上移动的矩形元素，通常被用于一些通知类的应用场景。本文将利用相反数实现这一动画效果，需要的可以参考一下2022-05-05
Vue报错:Injection "xxxx" not found的解决办法
这篇文章主要给大家介绍了关于Vue报错:Injection "xxxx" not found的解决办法,文中通过图文将解决的办法介绍的非常详细,对大家的学习具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue3+vite动态加载路由,本地路由和线上路由匹配方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了Vue父子组件传值以及父调子方法、子调父方法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
Vite 使用 Rollup 作为默认的构建工具,可以将应用程序的源代码打包成一个或多个优化的静态文件,本文就来为大家介绍一下Vite如何进行项目搭建与环境配置吧2023-09-09
这篇文章主要给大家介绍了关于vue项目中使用scss的详细方法步骤,scss是一种css预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性,让css更加简洁、适应性更强,可读性更佳,需要的朋友可以参考下2023-11-11
最近项目里集成了百度地图的一些功能,所以下面这篇文章主要给大家介绍了关于前端小技能之Vue集成百度离线地图功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了uniapp仿微信聊天界面的相关资料,这里提及了一个时间工具包timeMethod.js,该工具包可能提供了一系列时间处理的功能,如格式化日期、计算时间差等,以便在消息格式中正确展示时间信息,使用此类工具包可以大大提高开发效率,需要的朋友可以参考下2024-10-10
最新评论