Vue系列（五）——渲染之二三事

Hello小伙伴们，好久不见，大家五一过得怎么样呢~反正兔妞出去以日均2w步的运动量玩耍一圈回来已经要散架了，所以稍休息了几天，今天就继续我们的Vue的专题吧。如标题，我们今天的主题是渲染！

列表渲染

不知道大家有没有被数组的循环渲染折磨过呢，相信大家都写过for(var i=0, i<data.length;i++){}之类的代码吧，有的时候一层套一层，看着自己都要吐了，这时候就轮到我们Vue的列表渲染上场了。

1）使用Vue进行列表渲染主要需要两步。

首先，我们要在data中定义数组：

有了数组，我们就可以对数组进行循环了，通过v-for我们就可以对列表进行循环了。这里其实和我们前面提到的ES6中的for循环很像，item in items的方法进行循环。是不是很简单呢~

2）那么有的小伙伴要问了，那万一我要知道索引咋办呢~别着急，Vue是支持的呢！

这样子就可以了，但是顺序不要写反哦，一定要先写循环体中的对象，然后才是index！

3）告诉大家个小秘密，其实能够作为列表循环的不只是数组呢，对象也是可以的：

一定要去试试哦~

4）细心的小伙伴们一定发现了，有的编辑器单写一个v-for会有小浪线，虽然也能运行，但是这对于一个拥有强迫症的码农来说是多么的煎熬啊！我们来看看是为啥呢？

事实上，当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。但是有些的时候会出现问题，通过增加一个key就能够就能够识别节点身份啦，所以最好都带上key呢~

那么讲道理key到底是干嘛的呢？它主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。从而避免有重复的key造成渲染失败。所以我们最好这样写呢：

条件渲染

1）说完了列表渲染，我们现在要说说条件渲染了。想必我聪明的小伙伴们已经猜到了v-if是干嘛的了，没错说白了就是有条件的渲染某一块内容。相似于if的使用，v-if也是有v-if, v-else-if, v-else。那么就让我们看一下究竟怎么用呢？

有了这个做个tab也就轻松多了，绑定个事件，通过改变条件的值就可以了，是不是呢~

2）不知道大家听说过v-show吗，这个与v-if有着相似的功能，都能够控制元素是否能够显示，那么他们又有什么区别呢。

他们的区别其实可以类比一下display:none;和visibility: hidden;

首先，就渲染的层面来说，v-show是默认渲染所有内容的，只是控制CSS样式让元素不能显示，有较大的初始渲染开销，而v-if是真的按照条件去渲染对应的区块，相对初始开销比较小。由于v-if每次条件改变都真的重新进行渲染，销毁、重建条件块中的事件监听器和子组件，需要很大的开销。而v-show，一直不进行重新渲染，所以有着较小的切换开销。

好啦，今天的内容就到这里啦，喜欢兔妞文章的小伙伴请关注并在看哦~~