JS基础实战课件03_Vue基础–模板语法（二）.pptx

Vue基础–模板语法（二）;;在真实开发中，我们往往会从服务器拿到一组数据，并且需要对其进行渲染。

这个时候我们可以使用v-for来完成；

v-for类似于JavaScript的for循环，可以用于遍历一组数据；;v-for的基本格式是itemin数组：

数组通常是来自data或者prop，也可以是其他方式；

item是我们给每项元素起的一个别名，这个别名可以自定来定义；

我们知道，在遍历一个数组的时候会经常需要拿到数组的索引：

如果我们需要索引，可以使用格式：(item,index)in数组；

注意上面的顺序：数组元素项item是在前面的，索引项index是在后面的；

;v-for也支持遍历对象，并且支持有一二三个参数：

一个参数：valueinobject;

二个参数：(value,key)inobject;

三个参数：(value,key,index)inobject;

v-for同时也支持数字的遍历：

每一个item都是一个数字；

v-for也可以遍历其他可迭代对象(Iterable);类似于v-if，你可以使用template元素来循环渲染一段包含多个元素的内容：

我们使用template来对多个元素进行包裹，而不是使用div来完成；

;Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。

这些被包裹过的方法包括：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

替换数组的方法

上面的方法会直接修改原来的数组；

但是某些方法不会替换原来的数组，而是会生成新的数组，比如filter()、concat()和slice()；

;在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。

这个key属性有什么作用呢？我们先来看一下官方的解释：

key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；

如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；

而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；

官方的解释对于初学者来说并不好理解，比如下面的问题：

什么是新旧nodes，什么是VNode？

没有key的时候，如何尝试修改和复用的？

有key的时候，如何基于key重新排列的？

;我们先来解释一下VNode的概念：

因为目前我们还没有比较完整的学习组件的概念，所???目前我们先理解HTML元素创建出来的VNode；

VNode的全称是VirtualNode，也就是虚拟节点；

事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode；

VNode的本质是一个JavaScript的对象；

;如果我们不只是一个简单的div，而是有一大堆的元素，那么它们应该会形成一个VNodeTree：;我们先来看一个案例：这个案例是当我点击按钮时会在中间插入一个f；

;Vue源码对于key的判断;没有key的操作（源码）;我们会发现上面的diff算法效率并不高：

c和d来说它们事实上并不需要有任何的改动；

但是因为我们的c被f所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增；

;有key执行操作（源码）;第一步的操作是从头开始进行遍历、比较：

a和b是一致的会继续进行比较；

c和f因为key不一致，所以就会break跳出循环；

第二步的操作是从尾部开始进行遍历、比较：;第三步是如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点：

第四步是如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点：;第五步是最特色的情况，中间还有很多未知的或者乱序的节点：

所以我们可以发现，Vue在进行diff算法的时候，会尽量利用我们的key来进行优化操作：

在没有key的时候我们的效率是非常低效的；

在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效；