012.v-show与v-if与v-for

Posted 2021-07-22 Ruovan

v-show与v-if与v-for

• • 01. v-show 与 v-if
  • • （1）区别
    • （2）使用场景
    • （3）性能优化
  • 02. v-if 与 v-for
  • • （1）优先级
    • （2）关于v-for中的key
    • • 为什么使用`key`：
      • 尽量不使用index作为key：

---

01. v-show 与 v-if

（1）区别

• v-if 是真正的条件渲染，直到条件第一次变为真时，才会开始渲染（懒加载）

  • v-if指令是直接销毁和重建DOM节点，达到让元素显示和隐藏的效果

• v-show 不管初始条件是什么都会渲染，并且只是简单地基于 CSS 的 display 属性进行切换

• v-show 只是 CSS 级别的 display: none; 和 display: block; 之间的切换

（2）使用场景

• v-if 适用于不需要频繁切换条件的场景（一次性渲染完的）
  • 在组件上使用可触发组件的生命周期
• v-show 则适用于需要非常频繁切换条件的场景
  • 不可用于组件

（3）性能优化

• 如何使用 v-if 进行性能优化？
  • 因为当 v-if="false" 时，内部组件是不会渲染的
  • 所以在特定条件才渲染部分组件（或内容）时，可以先将条件设置为 false
  • 需要时再设置为 true（或通过异步操作，比如 $nextTick）
  • 这样可以优先渲染重要的其它内容，合理利用，以进行性能优化

02. v-if 与 v-for

应尽量避免在v-for中使用v-if

（1）优先级

• 1、v-for优先于v-if被解析
• 2、如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
• 3、要避免出现这种情况，则在外层嵌套<template>，在这一层进行v-if判断，然后在内部进行v-for循环
• 4、如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项

（2）关于v-for中的key

• 为什么使用key：

  • 主要是为了高效的更新虚拟DOM
  • 使用key来给每个元素节点添加一个唯一标识
  • 可以方便Vue更好的区别各个组件，Diff算法就可以正确的识别此节点

  使用v-for更新已渲染的元素列表时，默认用就地复用策略

  • 当列表数据修改的时候，他会根据key值去判断某个值是否修改
  • 如果修改，则重新渲染这一项
  • 否则复用之前的元素

• 尽量不使用index作为key：

  • 这是由于index永远都是顺序排序的
  • 如果在数据中间插入一条数据，会导致后续数据的index值全部改变
  • 那么就会导致后面的所有数据都重新渲染一次