1.背景
我们都知道v-if和v-for是vue开发工程中十分常用的方法
2.原因
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。这意味着 v-if 将分别重复运行于 每个 v-for 循环中，即先运行 v-for 的循环，然后在每一个 v-for 的循环中，再进行 v-if 的条件对比，会造成性能问题，影响速度。
这一点是 Vue 官方的风格指南中明确指出的一点：
如以下模板:
<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id"> {{ user.name }} </li> </ul>
会被编译成：
function render() { return _c( 'ul', this.users.map((user) => { return user.isActive ? _c( 'li', { key: user.id }, [_v(_s(user.name))] ) : _e() }), ) }
可以看到，这里是先遍历（v-for），再判断（v-if）
3.通俗案例
这里有个问题就是：如果你有1000条数据，其中只有 10 条是isActive状态的，你只希望显示这 10 条，但是实际在渲染时，每一次渲染，这1000条数据都会被遍历一遍。比如你在这个组件内的其他地方改变了某个响应式数据时，会触发重新渲染，调用渲染函数，调用渲染函数时，就会执行到上面的代码，从而将这1000条数据遍历一遍，即使你的users没有发生任何改变。
4.解决方案
为了避免这个问题，在此场景下你可以用计算属性代替：
<template> <div> <ul> <li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li> </ul> </div> </template> <script> export default { // ... computed: { activeUsers() { return this.users.filter((user) => user.isActive) } } } </script> }
这样只会在users发生改变时才会执行这段遍历的逻辑，和之前相比，避免了不必要的性能浪费。
5.扩展（强烈看下）
如果遇到一些特殊情况如，需要遍历数组同时，同时对数组中单个对象下的数组进行遍历（比较绕口）如下图
这种情况计算属性需要传值！！
普通的计算属性函数已经无法解决这种情况了，需要用到高级函数，来解决（也就是函数体套函数体这种）
重点是把函数return出来
