vue2中v-if和v-for同时出现执行先后问题

今天在网上无意间看到一个面试题目，在vue中，如果v-if和v-for同时出现在一个node节点中，会怎么渲染，哪个的优先级更高？

const app = new Vue({
  router,
  // el:"#app",
  store,
  data() {
    return {
      showli: true,
      list: [{name:"111"},{name:"222"}]
    }
  },
  template:'<div><ul><li v-for="item in list" v-if="showli">{{item.name}}</li></ul></div>'
  // render: h => h(App)
}).$mount('#app')

console.log(app.$options.render);

查看template渲染模板，我们可以看到v-for和v-if同时存在li上，此时我们通过打印他的渲染函数体得到如下结果

可以看出有一个 _l循环函数先循环，后续在循环里面判断showli，这就可以说v-for先执行，v-if后执行，这样写会带来一个性能问题，showli为false的时候还是进行了循环判断渲染，如果要提高性能，我们可以把v-if抽出去，放在li的最外层（例如可以放在ul上），从而确保先进行if判断后执行循环，提高执行效率。

同时我们也可以查看vue的源码：

也可以看出来for判断是在if判断的前面。