原文網址：Vue--v-if和v-for不能同時使用--原因/解決方案/實體_IT利刃出鞘的博客-CSDN博客

簡介

簡介

本文介紹v-if和v-for不要同時使用的原因及解決方案，

官網

條件渲染 — Vue.js

風格指南 — Vue.js

原因與解決方案

說明

當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級，

vue官方著重強調：永遠不要把 v-if 和 v-for 同時用在同一個元素上，

v-if和v-for不能同時使用的原因

v-for比v-if優先級高，每一次都需要遍歷整個陣列，造成不必要的計算，影響性能，即使100個list中只需要使用一個資料，也會回圈整個陣列，

解決方案

場景1：每項都有自己的狀態

例：v-for="user in users" v-if="user.isActive"，將 users 替換為一個計算屬性 (比如 activeUsers)，讓其回傳過濾后的串列，

場景2：有公共的狀態

例：v-for="user in users" v-if="shouldShowUsers"，將 v-if 移動至外部容器元素上 (比如 ul、ol)，

示例1：每項都有自己的狀態

公共代碼

路由（router/index.js）

import Vue from 'vue'
import Router from 'vue-router'
import Demo from "../views/Demo";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/demo',
      name: 'Demo',
      component: Demo,
    }
  ],
})

反例

代碼

Demo.vue

<template>
  <div class="hello">
    <ul>
      <li
          v-for="user in users"
          v-if="user.isActive"
          :key="user.userId"
      >
        {{user.userName}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
      users: [
        {
          userId: 1,
          userName: 'Tony1',
          isActive: true
        },
        {
          userId: 2,
          userName: 'Tony2',
          isActive: false
        },
        {
          userId: 3,
          userName: 'Tony3',
          isActive: true
        }
      ]
    }
  },

}
</script>

<style scoped>

</style>

測驗

訪問：http://localhost:8080/#/demo

總結

當 Vue 處理指令時，v-for 比 v-if 具有更高的優先級，所以上述模板會進行如下運算：

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

　　因此哪怕我們只渲染出一小部分用戶的元素，也得在每次重渲染的時候遍歷整個串列，

好例子

代碼

Demo.vue

<template>
  <div class="hello">
    <ul>
      <li
          v-for="user in activeUsers"
          :key="user.userId"
      >
        {{user.userName}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
      users: [
        {
          userId: 1,
          userName: 'Tony1',
          isActive: true
        },
        {
          userId: 2,
          userName: 'Tony2',
          isActive: false
        },
        {
          userId: 3,
          userName: 'Tony3',
          isActive: true
        }
      ]
    }
  },
  computed: {
    activeUsers() {
      return this.users.filter(function (user) {
        return user.isActive;
      })
    }
  }

}
</script>

<style scoped>

</style>

測驗

訪問：http://localhost:8080/#/demo

示例2：有公共的狀態

公共代碼

路由（router/index.js）

import Vue from 'vue'
import Router from 'vue-router'
import Demo from "../views/Demo";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/demo',
      name: 'Demo',
      component: Demo,
    }
  ],
})

反例

代碼

Demo.vue

<template>
  <div class="hello">
    <ul>
      <li
          v-for="user in users"
          v-if="userActive"
          :key="user.userId"
      >
        {{user.userName}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
      userActive: true,
      users: [
        {
          userId: 1,
          userName: 'Tony1',
        },
        {
          userId: 2,
          userName: 'Tony2',
        },
        {
          userId: 3,
          userName: 'Tony3',
        }
      ]
    }
  },
}
</script>

<style scoped>

</style>

測驗

訪問：http://localhost:8080/#/demo

好例子

代碼

Demo.vue

<template>
  <div class="hello">
    <ul v-if="userActive">
      <li
          v-for="user in users"
          :key="user.userId"
      >
        {{user.userName}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
      userActive: true,
      users: [
        {
          userId: 1,
          userName: 'Tony1',
        },
        {
          userId: 2,
          userName: 'Tony2',
        },
        {
          userId: 3,
          userName: 'Tony3',
        }
      ]
    }
  },
}
</script>

<style scoped>

</style>

測驗

訪問：http://localhost:8080/#/demo