列表渲染_虚拟dom

用 v-for 把一个数组对应为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

<ul id="app">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#app',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})

结果:

在 v-for 块中,我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数,即当前项的索引。

<ul id="app">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#app',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})

结果:

  • Parent - 0 - Foo
  • Parent - 1 - Bar

你也可以用 of 替代 in 作为分隔符,因为它更接近 JavaScript 迭代器的语法:

<div v-for="item of items"></div>

在 v-for 里使用对象

你也可以用 v-for 来遍历一个对象的 property。

<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})

结果:

  • How to do lists in Vue
  • Jane Doe
  • 2016-04-10

你也可以提供第二个的参数为 property 名称 (也就是键名):

<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>

title: How to do lists in Vue

author: Jane Doe

publishedAt: 2016-04-10

还可以用第三个参数作为索引:

<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>

0. title: How to do lists in Vue

1. author: Jane Doe

2. publishedAt: 2016-04-10

在遍历对象时,会按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

在v-for里使用范围值

v-for 也可以接受整数。在这种情况下,它会把模板重复对应次数。

<div>
<span v-for="n in 10">{{ n }} </span>
</div>

结果:

1 2 3 4 5 6 7 8 9 10


维护状态

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key attribute:

<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>

建议尽可能在使用 v-for 时提供 key 属性,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制,key 并不仅与 v-for 特别关联。

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

虚拟dom原理

为什么使用虚拟dom

因为真实dom占用大量的内存,创造的虚拟dom非常精简,只保留了必要的属性(vnode)

vue虚拟dom的算法是什么

采用了diff算法,说白了就是对比

有一份和真实dom一比一复刻的映射关系,另外还有一个检测变化的虚拟dom

这两份进行对比,判断哪里发生变化了,然后花最小的代价,去更新到真实dom里

梓旭梓旭
THE END
分享
二维码
< <上一篇
下一篇>>