v for與v if的優先順序

一般我們在兩種常見的情況下會傾向於這樣做：

詳解當 vue 處理指令時，v-for比v-if具有更高的優先順序，所以這個模板：


v-for="user in users"
v-if="user.isactive"
:key="user.id"
>
}li>
ul>

將會經過如下運算：

this.users.map(function (user) 
})

因此哪怕我們只渲染出一小部分使用者的元素，也得在每次重渲染的時候遍歷整個列表，不論活躍使用者是否發生了變化。

通過將其更換為在如下的一個計算屬性上遍歷：

computed: )
}}


v-for="user in activeusers"
:key="user.id"
>
}li>
ul>

我們將會獲得如下好處：

為了獲得同樣的好處，我們也可以把：


v-for="user in users"
v-if="shouldshowusers"
:key="user.id"
>
}li>
ul>

更新為：


v-for="user in users"
:key="user.id"
>
}li>
ul>

通過將v-if移動到容器元素，我們不會再對列表中的每個使用者檢查shouldshowusers。取而代之的是，我們只檢查它一次，且不會在shouldshowusers為否的時候運算v-for。

反例


v-for="user in users"
v-if="user.isactive"
:key="user.id"
>
}li>
ul>


v-for="user in users"
v-if="shouldshowusers"
:key="user.id"
>
}li>
ul>

好例子


v-for="user in activeusers"
:key="user.id"
>
}li>
ul>


v-for="user in users"
:key="user.id"
>
}li>
ul>