In vue, if v-if and V-for appear in the same node at the same time, how will the rendering be done? Which one has a higher priority?

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);
Copy the code

Looking at the Template render template, we can see that both V-for and V-if exist on Li. At this point, we print the body of his render function to get the following result

If showli is false, v-for will be executed first, and v-if will be executed later. If showli is false, v-if will be executed later. If showli is false, v-if will be executed later. Put it on the outermost layer of LI (for example, on UL) to ensure that the if judgment is performed first and then the execution loop is executed to improve execution efficiency.

At the same time, we can also check the source of vue:

You can also see that the “for” judgment comes before the “if” judgment.