Vue: v-if, v-show and v-for

作者 Lei Zhang 日期 2018-12-10
Vue
Vue: v-if, v-show and v-for

v-if vs v-show

V-if is “real” and lazy:

  • The event and child components inside the conditional block are properly destroyed and re-created during the toggle.
  • If the condition is false on initial render, it’ll do nothing until the condition becomes true for the first time.

V-show element is always rendered regardless of initial condition.

Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs.

So prefer v-show if the component is toggled very often. Otherwise, you should choose v-if.

Tips: Do not use v-if with v-for on the same element:
V-if has a higher priority than v-for, so the template:
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>

Will be evaluated similar to:

this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})

We have to iterate over the entire list every time we re-render, whether or not the set of active users has changed.

By iterating over a computed property instead, like this:

computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>
Benefits:
  • The filtered list will only be re-evaluated if there are relevant changes to the ‘users’ array, making filtering much more efficient.
  • We only iterate over active users during render.
  • Logic decoupled.(解耦)

We can also get similar benefits from moving the v-if to a container element, then we’re no longer checking shouldShowUsers for every user in the list. Instead, we check it once and don’t even evaluate the v-for if shouldShowUsers is false.

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>
FEATURED TAGS
Vue