Vue数组更新方法

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.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);

以上关于Vue数组更新方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。