关键词：
优先使用v-If
vIf 和 vShow 理论上都是作用于元素的显示隐藏，只是一个是直接对DOM，一个是通过CSS的 display 来操作的，在项目中大部分的时候我都是直接使用 vIf 直接代替使用 vShow ，只有当DOM频繁进行显示和隐藏的时候，但是这种场景非常少见，我只在信息推送优先级中使用过，项目中一直通过 WebSocket 推的消息进行消息的场景遇到过，频繁推送不同类型的通知。
v-for和v-if不要一起使用
1、v-for 的优先级其实是比 v-if 高的，所以当两个指令出现来一个DOM中，那么 v-for渲染的当前列表，每一次都需要进行一次 v-if的判断。
而相应的列表也会重新变化，这个看起来是非常不合理的。因此当你需要进行同步指令的时候。
尽量使用计算属性，先将 v-if不需要的值先过滤掉。
// 计算属性
computed:
filterList: function ()
return this.showData.filter(function (data)
return data.isShow
)
// DOM
<ul>
<li v-for="item in filterList" :key="item.id">
item.name
</li>
</ul>
vFor key避免使用index作为标识
其实大家都知道 vFor 是不推荐使用 index 下标来作为 key 的值，这是一个非常好理解的知识点，可以从图中看到，当index作为标识的时候，插入一条数据的时候，列表中它后面的key都发生了变化，那么当前的 vFor 都会对key变化的 Element 重新渲染，但是其实它们除了插入的 Element 数据都没有发生改变，这就导致了没有必要的开销。
所以，尽量不要用index作为标识，而去采用数据中的唯一值，如 id 等字段。
v-if和v-for的优先级(代码片段)
v-if和v-for的优先级在官方文档中v-if是根据表达式的值truthiness来有条件的渲染元素，在切换元素以及它的数据绑定/组件被销毁并重建，如果元素是<template>，将提出它的内容作为条件块。首先，v-for和v-if是不应... 查看详情
vue性能优化(代码片段)
vue性能优化前言函数式组件冻结列表数据子组件拆分局部变量（缓存变量）computed的缓存特性v-if和v-for不要同时出现不需要渲染在视图的数据不要写在data中v-for中的keykeep-alive渐进式渲染时间片切割组件懒加载总结前言本... 查看详情
vue性能优化(代码片段)
vue性能优化前言函数式组件冻结列表数据子组件拆分局部变量（缓存变量）computed的缓存特性v-if和v-for不要同时出现不需要渲染在视图的数据不要写在data中v-for中的keykeep-alive渐进式渲染时间片切割组件懒加载总结前言本... 查看详情
v-for与v-if的优先级(代码片段)
原文地址 永远不要把 v-if 和 v-for 同时用在同一个元素上。一般我们在两种常见的情况下会倾向于这样做：为了过滤一个列表中的项目(比如 v-for="userinusers"v-if="user.isActive")。在这种情形下，请将 users替... 查看详情
v-if和v-for谁的优先级高？如何同时使用？(代码片段)
首先：永远不要把 v-if 和 v-for 同时用在同一个元素上。其次：当Vue处理指令时，v-for 比 v-if 具有更高的优先级1.过滤一个列表中的项目(比如 v-for="userinusers"v-if="user.isActive")。在这种情形下，请将 ... 查看详情
vue2vue2中的性能优化（持续更新中）(代码片段)
⭐v-for遍历避免同时使用v-if⭐v-for中的key绑定唯一的值⭐v-show与v-if对性能的影响⭐妙用计算属性⭐使用防抖与节流控制发送频率⭐路由守卫处理请求避免重复发送请求⭐使用第三方UI库的引入方式【前言】该系列是博主在使用vue2... 查看详情
vue的v-for与v-if的联系(代码片段)
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：<liv-for="todointodos"v-if="!t... 查看详情
前端常见vue面试题，被问到不会就糟了(代码片段)
...一个元素上，显然这是一个重要的注意事项源码里面关于代码生成的部分，能够清晰的看到是先处理v-if还是v-for，顺序上vue2和vue3正好相反，因此产生了一些症状的不同，但是不管怎样都是不能把它们写在一起的vue2.x源码分 查看详情
为什么v-if和v-for不建议用在同一标签(代码片段)
如下列代码：<divv-for="itemin[1,2,3]"v-if="item==1">item</div>v-for的优先级比v-if高，所以会先循环出来，然后再进行item每个v-if判断。这样就无用的多渲染好多次dom。解决办法:用computed写法代... 查看详情
vue的一些小记录(代码片段)
1.在一个标签中，不推荐v-for与v-if同时用//当v-if与v-for，v-for具有比v-if更高的优先级。//当它们处于同一节点（同一标签一起使用时），v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。当你想为仅有的一些... 查看详情
vue使用注意事项：v-for和v-if不要一起使用(代码片段)
v-for和v-if不应该一起使用，必要情况下可以替换成computed属性。原因：v-for比v-if优先，如果每一次都遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。<ul><liv-for="userinusers"v-if="user.isActive&quo... 查看详情
v-if和v-for可以一起使用吗？哪个优先级比较高？有什么影响？(代码片段)
v-for和v-if是可以一起使用的，vue官网：当同时使用时，v-if 比 v-for 优先级更高。我们并不推荐在一元素上同时使用这两个指令。官网例子：<!--这会抛出一个错误，因为属性todo此时没有在该实例上定义-->... 查看详情
vue中v-for与v-if使用错误(代码片段)
...具：vscodevue插件：Vetur错误原因：一个Vetur代码检查插件爆出：Elementsiniterationexpecttohave‘v-bind:key’directives错误警告原因分析：解决：在使用v-for的元素上绑定key。v-for与v-if结合 查看详情
2021最新vue面试题含源码解析(代码片段)
...or哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能v-for优先于v-if被解析（把你怎么知道的告诉面试官）//源码中找答案：compiler/codegen/index.js>genElement()if(el.staticRoot&&!e.staticProcessed) 查看详情
v-if和v-for
...容。这块内容只会在指令表达式返回true值的时候被渲染v-for指令基于一个数组来渲染一个列表。v-for指令需要使用iteminitems形式的特殊语法，其中items是源数据数组或者对象，而item则是被迭代的数组元素的别名。在v-for时，建议设 查看详情
避免v-if和v-for用在一起
参考技术Av-if和v-for一起使用，v-for的优先级要高于v-if详解当vue处理指令时，v-for比v-if具有更高的优先级，所以这个模板：将会经过如下运算因此，哪怕我们只渲染出一小部分的用户元素，也得在每次重新渲染的时候遍历整个列... 查看详情
vue中v-if和v-for指令最好不要同时使用
参考技术A建议不要在与v-for相同的元素上使用v-if。因为v-for指令的优先级高于v-if当它们处于同一节点。v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。将if指令添加到父级元素上，这可以避免对每个列表... 查看详情
为啥v-if和v-for不建议同时使用
参考技术A在官方文档中明确指出v-for和v-if不建议一起使用。原因：v-for比v-if优先级高，每一次都需要遍历整个数组，造成不必要的计算，影响性能，即使100个list中只需要使用一个数据，也会循环整个数组。解决：使用computed 查看详情