Vue条件渲染区分

1. v-if在初始渲染时判断条件，若为假，则不进行渲染。只有当条件为真时才开始渲染条件块。确保在切换过程中条件块内的事件监听器和子组件被适当的销毁和重建。
2. v-show无论初始判断条件是真或假，均会进行渲染。即只是切换元素的CSS Property display。
3. v-show不支持<template>和v-else

使用v-if有更高的切换开销，若运行时条件很少改变，则选择v-if。v-show有更高的初始开销，若需要频繁的切换，则使用v-show更好。

v-if和v-for不要同时用在同一元素上

参数v-for的优先级比v-if高

1. 过滤列表中的项目，优先将过滤的项目替换为计算属性，使其返回过滤后的列表进行v-for

   1 2 3 4 5 6 7 8 9

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

   无论列表数据量有多大，筛选后的列表有没有变化，都会在每次重新渲染时遍历整个列表。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   //改写后 <ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul> computed: { activeUsers() { return this.users.filter(user => user.isActive) } }

   改写后，过滤列表只会在筛选后列表发生变化时才会重新计算，过滤更高效。且在v-for遍历时，只会遍历选后的列表，渲染更高效。解耦渲染层的逻辑，可维护性更强。

2. 避免渲染需要被隐藏的列表，将v-if移动到容器元素上。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   //改写前 <ul> <li v-for="user in users" v-if="shouldShowUsers" :key="user.id" > {{ user.name }} </li> </ul> //改写后 <ul v-if="shouldShowUsers"> <li v-for="user in users" :key="user.id" > {{ user.name }} </li> </ul>

   改写后不需要对列表内每个用户都检查是否应该显示，而只检查一次，且不会v-for不应该显示的用户。