v-if 和 v-for 的一些疑问

Question

<!--
  问题一：这种情况下，假如循环20次，v-if是判断20次还是1次？
  data: {
    flag: false,
    listObj: {
      a: {title: '1'},
      b: {title: '2'},
      c: {title: '3'},
      d: {title: '4'}
    }
  }
-->
<li v-for="(value, key, index) in listObj" :key="key">
  <span v-if="flag">{{value.title}}</span>
</li>

<!--
  问题二，这种情况下，假如循环20次，v-if我认为是判断20次，
  可以如果是判断20次，这种写法是不是和 v-for v-if写在一起一样了？
  data: {
    listObj: {
      a: {title: '1', flag: false},
      b: {title: '2', flag: true},
      c: {title: '3', flag: true},
      d: {title: '4', flag: false}
    }
  }
-->
<li v-for="(value, key, index) in listObj" :key="key">
  <span v-if="value.flag">{{value.title}}</span>
</li>

Answer 1

双越 2020-11-13 19:07:46

这就跟用 js 写嵌套的 if 和 for 一样。你试着把它翻译成 js 代码，看能翻译过来吗？

• 提问者 一爿 #1

  我用 vue-template-compiler 编译后发现，就是for循环，然后在每次循环中判断。
  那请问老师我这样理解的对不对，当列表渲染出来了之后。flag的状态改变，如果v-for和v-if一起使用的方案会整个列表重新渲染一遍，而嵌套v-for和v-if只改变v-if所在的元素，已达成修改更少DOM的目的。

• 双越 回复 提问者 一爿 #2

  “只改变v-if所在的元素” —— 这就扯到了 diff 算法了。
  跟你题目里问的“执行多少次”没有关系。