简述v-if 和 v-for 哪个优先级更高？如果同时出现，应如何优化 ？

在 Vue.js 中，v-if 和 v-for 都是指令，用于在模板中控制元素的渲染。然而，它们之间有一个主要的优先级差异。

优先级：v-if 的优先级高于 v-for。这意味着在同时出现 v-if 和 v-for 的情况下，Vue 会首先处理 v-if 条件，然后再处理 v-for 循环。

优化建议：当 v-if 和 v-for 同时出现在同一元素上时，通常建议将它们分开以避免性能问题。这主要是因为，当 v-if 的条件为 false 时，整个元素（包括其子元素）都不会被渲染，这可能会导致不必要的性能开销。

一种常见的优化方法是使用计算属性（computed properties）或方法来返回一个过滤后的数组，然后只在 v-for 中使用该数组。这样，你可以在 v-for 循环之前对数组进行过滤，从而减少不必要的渲染。

例如，假设你有一个列表，你只想渲染满足某个条件的元素，可以这样写：

<template>
  <div>
    <div v-for="item in filteredItems" :key="item.id">
      <!-- 渲染内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [/* 原始数据 */],
      condition: /* 条件 */
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => this.condition(item));
    }
  }
};
</script>

在这个例子中，filteredItems 是一个计算属性，它返回一个满足条件的元素数组。然后，v-for 只在 filteredItems 上进行循环，从而避免了在 v-if 中进行不必要的条件检查。