vue中v-if和v-for优先级谁高；vue2和vue3中v-if和v-for对比

一、前言

在v3出来之前，遇到这个问题，回答是统一的，肯定是for比if高，因为官方文档就是这么讲的；

在v3出来之后，回答就变了，变成if比for高；

并且官方推荐，不要将if和for放在一块使用

有如下文件：

<ul>
    <li v-for="item in list" :key="item.id" v-if="item.id === 1">li>
ul>

const list = [
    {
        id:1,
        name:'我是1'
    }, {
        id:2,
        name:'我是2'
    }, {
        id:3,
        name:'我是4'
    }, {
        id:4,
        name:'我是4'
    }
]

二、先看vue2

function render() {
  with(this) {
    return _c('ul', _l((list), function (item) {
      return (item.id === 1) ? _c('li', {
        key: item.id
      }) : _e()
    }), 0)
  }
}

1. 可以看到，render对list的每项进行遍历，每项进行判断

三、在看vue3

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("ul", null, [
    (_ctx.item.id === 1)
      ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(_ctx.list, (item) => {
          return (_openBlock(), _createElementBlock("li", {
            key: item.id
          }))
        }), 128 /* KEYED_FRAGMENT */))
      : _createCommentVNode("v-if", true)
  ]))
}

1. 可以看到，直接进行了判断，如果不匹配，不对list进行遍历。也就是if会先被执行。
2. 由此render可以理解到官方文档中的描述，当for和if一起使用的时候，if先执行。并且这个时候，if中的条件，会报错，因为if中的变量，没有定义。

四、文档推荐写法

1. 使用template

     <ul>
         <template  v-for="item in list">
             <li :key="item.id"  v-if="item.id === 1">li>
         template>
     ul>
   

2. 使用计算属性

     <ul>
         <li :key="item.id"  v-for="item in activeList" >li>
     ul>
   

     const activeList = computed(()=>{
         return list.filter(t=>t.active)
     })
   

到底使用推荐的那个写法？

• template写法，无疑每次还是需要去遍历，判断；
• 计算属性，对数据进行缓存，数据不变，渲染层不会重新渲染

由此 推荐使用计算属性方式

五、总结

1. 渲染层逻辑优化。开发时候，开发者经常还是写到一块，改动以后，强制必须if在上层，或者强制开发者使用template加上一层。

2. 性能的提升。在v2中，假如数组很长，那么就必须对数组的每项目进行判断；而在vue3中，强制用户将显示的数组先过滤一层