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数组更新方法
码云笔记 » Vue数组更新方法
总结的很好。
谢谢