v-for为何要加key，v-if和v-for的优先级

v-for为何要加key，v-if和v-for的优先级

优先级：

vue2.0: v-for的优先级高于v-if
vue3.0: v-if 的优先级高于v-for

// 将抛出一个错误，因为 v-if 指令将首先被执行，而迭代的变量 user 此时还不存在
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

官网
简单来说
v-for的渲染策略是能复用的复用，数据修改了的再去更新，怎么判断是否修改了呢，就是通过这个key来判断的，key的作用就是高效的更新虚拟DOM。但是拿什么作为key也是有讲究的

如果拿index作为key去渲染

举例：

<div v-for="(item, index) in list" :key="index"> {{ item.name }} </div>

const list = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' }]

插入一条数据之后对比
以前的数据：

key: 0,  id: 1,  name: '张三'              key: 0,  id: 1,  name: '张三'        
key: 1,  id: 2,  name: '李四'              key: 1,  id: 4,  name: '新插入的数据'
key: 2,  id: 3,  name: '王五'              key: 2,  id: 2,  name: '李四'
                                           key: 3,  id: 3,  name: '王五'

除了第一条数据，其他的三条数据都因为key值发生了变化需要重新渲染。
但如果用id作为key值

key: 1,  id: 1,  name: '张三'              key: 1,  id: 1,  name: '张三'        
key: 2,  id: 2,  name: '李四'              key: 4,  id: 4,  name: '新插入的数据'
key: 3,  id: 3,  name: '王五'              key: 2,  id: 2,  name: '李四'
                                           key: 3,  id: 3,  name: '王五'

可以发现只有一条数据发生了变化，因为其他数据的id都没变，所以key值也没有变化，这样的话就只需要渲染这条新增的数据即可，渲染效率上就得到了提升

参考文章：
https://blog.csdn.net/qq_41609404/article/details/84064064