Which is priority v-for or V-IF? Who later? How to improve performance when coexistence is required

First, look at the picture below

When using v-for and V-if in the same tag, the editor will report an error:

The 'dataList' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if

The reason: Because v-for has a higher priority than V-IF, v-IF will run in a loop in V-FOR, causing unnecessary calculations and affecting performance.

Let’s use a demo to prove this point:

Render = item.isShow (); render = item.isShow (); render = item.isShow (); render = item.isShow (); render = item.isShow (); The v-for is executed first and the V-if is executed later.

Of course, the source of the answer is also at a glance, the order of execution is: static root node >once>for>if

How can you use if in V-for without affecting performance?

1. V-if is used in the outer layer of v-for

<div v-if="isShow">
    <p v-for="item in dataList" :key="item.id">{{item.value}}</p>
</div>
Copy the code

2. Use computed properties

computed: { dataList: function () { return this.users.filter(function (user) { return user.isShow; // Return isShow=true, add to dataList array})}}Copy the code