Hello小伙伴们，很久不见，你们五一过得怎么样呢~反正兔妞出去以日均2w步的运动量玩耍一圈回来已经要散架了，因此稍休息了几天，今天就继续咱们的Vue的专题吧。如标题，咱们今天的主题是渲染！node
列表渲染算法
不知道你们有没有被数组的循环渲染折磨过呢，相信你们都写过for(var i=0, i<data.length;i++){}之类的代码吧，有的时候一层套一层，看着本身都要吐了，这时候就轮到咱们Vue的列表渲染上场了。数组
1）使用Vue进行列表渲染主要须要两步。微信
首先，咱们要在data中定义数组：编辑器
有了数组，咱们就能够对数组进行循环了，经过v-for咱们就能够对列表进行循环了。这里其实和咱们前面提到的ES6中的for循环很像，item in items的方法进行循环。是否是很简单呢~flex
2）那么有的小伙伴要问了，那万一我要知道索引咋办呢~别着急，Vue是支持的呢！spa
这样子就能够了，可是顺序不要写反哦，必定要先写循环体中的对象，而后才是index！.net
3）告诉你们个小秘密，其实可以做为列表循环的不仅是数组呢，对象也是能够的：3d
必定要去试试哦~orm
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，一直不进行从新渲染，因此有着较小的切换开销。
好啦，今天的内容就到这里啦，喜欢兔妞文章的小伙伴请关注并在看哦~~
本文分享自微信公众号 - 萌兔it（mengtu_it）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。