Vue 的核心是数据与视图的双向绑定,当我们修改数组时,Vue 会检测到数据变化,所以用 v-for 渲染的视图也会立即更新。Vue 包含了一组观察数组变异的方法,使用他们改变数组也会触发视图更新。

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

比如以下例子:

<div id="app">
	<ul>
		<li v-for="book in books">{{ book.name }}</li>
	</ul>
</div>

JavaScript 代码:

var app = new Vue({
	el: '#app',
	data:{
		books:[
			{ name: '《Vue.js 实战》' },
			{ name: '《JavaScript 语言精粹》' },
			{ name: '《JavaScript 高级程序设计》' }
		]
	}
});

然后,我再给数据 books 添加一项:

app.books.push({
	name: '《css 解密》'
});

使用上面的方法会改变原始数组,当然也有些方法不会改变原数组,例如:

  • filter()
  • concat()
  • slice()

他们返回的是一个新数组,在使用这些非变异方法时,可以用新数组来替换原数组,以下例子,我们找出含有 JavaScript 关键词的数目,例如:

<div id="app">
	<ul>
		<template v-for="book in books">
			<li>书名:{{ book.name }}</li>
			<li>作者:{{ book.author }}</li>
		</template>

	</ul>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data:{
			books:[
				{
					name: '《Vue.js 实战》',
					author: '梁灏'
				},
				{
					name: '《JavaScript 语言精粹》',
					author: 'Douglas Crockford'
				},
				{
					name: '《JavaScript 高级程序设计》',
					author: 'Nicholas C.Zakas'
				}
			]
		}
	});

	app.books = app.books.filter(function (item){
		return item.name.match(/JavaScript/);
	});
</script>
Vue 数组更新

渲染的结果中,第一项《Vue.js 实战》被过滤到了,只显示书名中含有 JavaScript 的选项。

Vue 在检测到数组变化时,并不是直接重新渲染整个列表,而是最大化的复用 DOM 元素。替换的数组中,含有相同元素的项不会被重新渲染,因此可以大胆地用新数组来替换旧数组,不用担心新能问题。

需要注意的是,以下变动的数组中,Vue 是不能检测到的,也不会触发视图更新:

  • 通过索引直接设置项,比如 app.books[3] = {…}。
  • 修改数组长度,比如 app.books.length = 1。

解决第一个问题可以用两种方法实现同样的效果,第一种是使用 Vue 内置的 set 方法:

Vue.set(app.books, 3, {
	name: '《css 解密》',
	author: '[希] Lea Verou'
});

如果是在 webpack 中使用组件化的方式,默认是没有导入 Vue 的,这时可以使用$set,例如:

this.$set(app.books, 3, {
	name: '《css 解密》',
	author: '[希] Lea Verou'
});

//这里的 this 指向的就是当前组件实例,即 app。在非 webpack 模式下也可以用$set 方法,例如 app.$set(…)

另一种方法:

app.books.splice(3, 1, {
	name: '《css 解密》',
	author: '[希] Lea Verou'
});

第二个问题也可以直接用 splice 来解决:

app.books.splice(1);

「点点赞赏,手留余香」

17

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue数组更新方法

2 评论

  1. 总结的很好。

发表回复