当v-for和v-if一起使用时，为了性能优化，可把v-if移到外层。这样可以避免不必要的循环。 template ul v-if="shouldShowItems" li v-for="item in items" :key="item.id" {{ item.name }} /li /ul/templatescript setupimport { ref } from 'vue';const shouldShowItems = ref(true);const items = ref([ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]);/script// 运行结果：当shouldShowItems为true时，才会渲染列表 性能优化很重要，合理移动v-if位置可减少不必要的计算。