vue列表渲染 v-for 和 v-if 有什么区别（通俗易懂）

列表渲染v-for-v-if

• 同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。
• 当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。
• 这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

1. 这会抛出一个错误，因为属性 todo 此时没有在该实例上定义

<template>
    <li v-for="todo in obj" v-if="!todo.done">
        {{ todo.name }}
    </li>
</template>
​
<script setup>
import { ref, reactive, computed } from "vue";
const obj = reactive(
    {
        name: '张三',
        age: '18',
        done: true
    },
    {
        name: '王五',
        age: '20',
        done: false
    },
)
</script>

2. 在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

    <template v-for="todo in obj">
        <li v-if="!todo.done">
            {{ todo.name }}
        </li>
    </template>
</template>