码云笔记前端博客
Home > 前端技术 > Vue数组更新方法

Vue数组更新方法

2019-01-23 分类:前端技术 作者:码云 阅读(5184)

本文共计1535个字,预计阅读时长需要4分钟。

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

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

比如以下例子:

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

JavaScript代码:

1
2
3
4
5
6
7
8
9
10
var app = new Vue({
    el: '#app',
    data:{
        books:[
            { name: '《Vue.js实战》' },
            { name: '《JavaScript语言精粹》' },
            { name: '《JavaScript高级程序设计》' }
        ]
    }
});

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

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

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

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

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

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
28
29
30
31
32
33
34
<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方法:

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

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

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

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

另一种方法:

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

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

1
app.books.splice(1);

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(6) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
6

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 2 条评论 - Vue数组更新方法

  1. 元芳 Linux Chrome 62.0.3202.84

    总结的很好。

    1. 码云 Windows 7 Chrome 69.0.3497.100

      @元芳谢谢

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 458 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 14 个
  • 标签总数: 1011 个
  • 建站时间: 495 天
  • 访问总量: 8648009 次
  • 最近更新: 2019年10月21日