v-if和v-show的区别是什么？v-if和v-for为什么不能一起用？v-for中的key有什么作用？
1 v-if 和 v-show
1.1 作用
都用来管制元素的显示和暗藏
1.2 管制元素显隐的形式
v-if管制虚构DOM树上元素的创立和销毁，Vue的响应零碎会依据虚构DOM树对理论DOM进行更新，从而间接管制理论DOM上元素的显隐
v-show通过给元素增加款式display:none来让元素暗藏
1.3 初始渲染比照
v-if是惰性的，如果初始渲染条件为false，什么都不做；只有条件为true，才会开始编译
v-show不论初始渲染条件如何，元素始终被编译并保留，之后依据条件通过CSS切换
1.4 切换耗费比照
如果频繁切换显示与暗藏，v-if会频繁创立、销毁元素，而v-show只是切换款式
故v-if的切换耗费更高
1.5 应用场景比照
如果元素的显示暗藏在一开始就定下来不会再变了，应用v-if
如果元素须要频繁切换显隐，应用v-show
1.6 其余
v-if能够搭配template应用，v-show不能够v-if能够搭配v-else，v-show无非凡语法
2 v-if 和 v-for
2.1 v-if 和 v-for 不能同时用的起因
为什么不能把v-if和v-for同时用在同一个元素上？
当 Vue 解决指令的时候，v-for的优先级比v-if高，因而这个模板：
<ul> <li v-for="item in list" v-if="item.isActive" :key="item.id"> {{item.name}} </li></ul>会通过如下运算：
this.list.map(function(item) { if (item.isActive) { return item.name }})咱们每次从新渲染的时候都要遍历整个列表，即便isActive为true的item很少，这会带来性能方面的极大节约，因而两者不能同时用在同一个元素上
2.2 v-if 和 v-for 一起用的解决方案
1、如果想管制整个列表的显隐，能够将v-if挪动到容器元素上，比方：
<body> <div id="example"> <ul v-if="listShow"> <li v-for="item in activeItems" :key="item.id">{{item.name}}</li> </ul> </div></body><script> const vm = new Vue({ el: "#example", data: { list: [ { id: 1, name: "路飞", isActive: true }, { id: 2, name: "索隆", isActive: false }, { id: 3, name: "山治", isActive: true }, ], listShow: false, } });</script>2、如果想过滤列表中的我的项目，能够应用计算属性(computed)返回过滤后的列表，比方：
<body> <div id="example"> <ul> <li v-for="item in activeItems" :key="item.id">{{item.name}}</li> </ul> </div></body><script> const vm = new Vue({ el: "#example", data: { list: [ { id: 1, name: "路飞", isActive: true }, { id: 2, name: "索隆", isActive: false }, { id: 3, name: "山治", isActive: true }, ], }, computed: { activeItems: function () { return this.list.filter((item) => item.isActive); }, }, });</script>3 列表渲染的 key 有什么用
在应用v-for进行列表渲染时，必须给元素增加一个key属性，并且这个key必须是惟一标识
<ul> <li v-for="item in list" :key="item.id">{{item.name}}</li></ul>咱们晓得，Vue 在更新元素时，不会间接操作实在DOM（渲染实在DOM开销是很大的），而是依据新数据生成新的虚构 DOM，而后对新旧虚构DOM进行差别比照，依据比照后果进行DOM操作来更新视图
列表渲染时，如果有key属性，因为它是惟一标识，在比照两个新旧节点时若key不同也就没有深刻比照的必要了。
为什么不能用index作为key？因为index是不稳固可变的，比方删除了列表第一个元素，会导致前面的元素index发生变化，从而导致key发生变化。这时，Vue 在比照新旧节点时，遇到key雷同的节点，就会进行深刻比照，发现节点内容产生了变动，就会去创立新的实在DOM用来替换原来的实在DOM。本来只须要删除实在DOM中第一个元素的操作，会变成新建、替换后续所有实在DOM，造成性能的极大节约
公众号【前端嘛】