Vue3 → v-if 比 v-for 优先级高

过滤列表 - 不推荐一个元素同时使用v-if与v-for

let app = Vue.createApp({
  template: `
    <div>
      <ul>
        <li
          v-for="todo of todoList" :key="todo.id"
          v-if="!todo.completed"
        >
          {{ todo.content }}
        </li>
      </ul>
    </div>
  `,
  data() {
    return {
      todoList: [
        {
          id: 1,
          content: 'CONTENT 1',
          completed: true
        },
        {
          id: 2,
          content: 'CONTENT 2',
          completed: false
        },
        {
          id: 3,
          content: 'CONTENT 3',
          completed: true
        }
      ]
    }
  }
}).mount('#app');

报错解释

• 在渲染期间，属性 todo 确实被访问了
• 但 todo 并没有定义在实例上

原因: v-if 优先级比 v-for 高

• v-if 的优先级高于 v-for
• 导致 v-if 的时候没有 todo 这个属性
• 只有 v-for 执行时才拿得到 todo

我们其实可以通过查看 render 函数的处理方式来佐证优先级：

let app = Vue.createApp({
  template: `
    <ul>
      <li
        v-for="todo of todoList" :key="todo.id"
        v-if="todoList.length !== 0"
        >
        {{ todo.content }}</li>
    </ul>
  `,
  data() {
    return {
      todoList: [...]
    }
  }
}).mount('#app');

console.log(app.$options.render);

我们单击这条打印（单击函数名 render）：

我们会发现解析之后是：

1. 先执行的 v-if 的命令 todoList.length !== 0
2. 而后才循环 todoList 渲染 li 元素的

解决方案