v-if与v-for哪个优先级更高

  1. v-for优先于v-if被解析
  2. 我经验做过实验，将它们放在一起，输出的渲染函数可以看出会先执行循环再判断条件
  3. 实践中，我们也不应该把它们放在一起，因为哪怕我们只渲染列表中的一小部分元素，也得在每次渲染的时候遍历整个列表。

  4. 通过有两种情况会导致我们这样做：

    • 为了过滤列表中的项目，(比如 v-for=”user in users” v-if=”user.isActive”)，此时定义一个计算属性 (比如 activeUsers)，让其返回过滤后的列表即可。
    • 为了避免渲染本应该被隐藏的列表 (比如 v-for=”user in users” v-if=”shouldShowUsers”)。此时把 v-if 移动至容器元素上 (比如 ul、ol)即可。
    1. 文档中明确指出永远不要把 v-if 和 v-for 同时用在同一个元素上，显然这是一个重要的注意事项

你知道Key的作用吗

  1. key的作用主要是为了更高效的更新虚拟DOM
  2. vue在patch过程中判断两个节点是否是相同节点，key是一个必要条件，渲染一组列表时，key往往是唯一标识，所以如果不定义key的话，vue只能认为比较的两个节点是同一个，哪怕实际上它们不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能。
  3. 实际使用中在渲染一组列表中key必须设置，而且必须是唯一标识，应该避免用数字索引去设置key，这可能导致一些隐藏bug；vue在使用相同标签元素过渡切换时，也会使用key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性。而不会触发过渡效果。
  4. 从源码中可以得知，vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key，它的值就是undefined，则可能认为两个节点永远是相同节点。只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的。