列表渲染_虚拟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里