v-if和v-show选择哪个？

vue前端有个for循环，对象数组数据较多，做成卡片形式，但如果数据含量超出50，整个页面会非常卡顿，然后这边做了个分页处理，请问分页的时候，用v-if还是v-show较好？

一般来说v-show适合数据量大，建议v-show. 因为v-if是动态创建dom和删除dom 。你是什么样地分页啊，截个图看看。
如果你是一次性请求回来数据，前端自己做分页。和 每次都请求 是有些不一样的（因为每页50条其实也不算太大）。

你可以试试 chrome的性能工具：
点击录制然后刷新一下页面看看哪个更好

img

这些指标是Chrome性能工具中的一些常见性能指标，用于衡量网页加载和运行过程中的各个阶段的耗时。以下是对每个指标的解释：

Loading（加载）：指的是从发起网络请求到接收到所有资源的时间。它包括了网络请求、DNS解析、建立连接、传输资源等过程的时间。

Experience（用户体验）：指的是从发起网络请求到用户能够看到页面内容的时间。它包括了网络请求和解析HTML、CSS、JavaScript等资源的时间。

Scripting（脚本执行）：指的是执行JavaScript代码的时间。它包括了JavaScript的解析、编译和执行的时间。

Rendering（渲染）：指的是将HTML、CSS等内容转换为可见页面的时间。它包括了DOM树构建、CSS样式计算、布局和绘制的时间。

Painting（绘制）：指的是将渲染好的页面内容绘制到屏幕上的时间。它包括了像素的绘制和合成的过程。

System（系统）：指的是操作系统和浏览器在处理页面加载和渲染时的时间。它包括了浏览器的事件处理、回流和重绘等过程的时间。

Idle（空闲）：指的是页面处于空闲状态的时间，即没有任何活动。在这段时间内，浏览器可以执行一些优化操作，如资源预加载等。

Total（总耗时）：指的是从发起网络请求到页面完全加载和渲染完成的总时间。
这些指标可以帮助开发者分析网页的性能瓶颈，找出优化的方向。通过对每个阶段的耗时进行监测和分析，可以了解到网页加载和运行的性能情况，从而进行性能优化和提升用户体验。

【以下回答由 GPT 生成】

回答:

在处理分页时，更适合使用v-if而不是v-show。

v-show是通过CSS样式来显示或隐藏元素，它会在DOM结构中保留被隐藏的元素，只是通过display属性来控制其显示状态。这意味着无论元素是否显示，都会占用相应的内存和计算资源。如果你有大量的元素需要隐藏，使用v-show可能会导致性能问题。

相反，v-if是通过条件判断来真正地渲染或销毁元素。当条件为false时，v-if会将元素从DOM中删除，释放相应的内存和计算资源。因此，当需要隐藏很多元素时，使用v-if更适合。

在你的情况下，当数据量超过50个时，如果使用v-show来隐藏多个元素，则会导致页面变得非常卡顿。相反，使用v-if，在渲染前50个元素时，每次只渲染一部分元素，其他元素会被销毁，从而提高页面的性能。

以下是一个示例代码，演示如何使用v-if和v-for来处理分页，每次只渲染5个元素：

<template>
  <div>
    <div v-for="(item, index) in displayedItems" :key="index">
      <!-- 卡片内容 -->
    </div>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 所有数据
      initialItemsToShow: 50, // 初始展示的数据量
      itemsPerLoad: 5, // 每次加载的数据量
      displayedItems: [], // 当前展示的数据
      currentIndex: 0 // 当前已展示到的索引
    };
  },
  mounted() {
    // 模拟异步获取数据
    this.fetchItems().then(items => {
      this.items = items;
      this.displayedItems = items.slice(0, this.initialItemsToShow);
      this.currentIndex = this.initialItemsToShow;
    });
  },
  methods: {
    fetchItems() {
      // 模拟异步获取数据的方法
    },
    loadMore() {
      const endIndex = this.currentIndex + this.itemsPerLoad;
      this.displayedItems = this.displayedItems.concat(
        this.items.slice(this.currentIndex, endIndex)
      );
      this.currentIndex = endIndex;
    }
  }
};
</script>

这个示例代码中，首先在mounted生命周期钩子中模拟异步获取数据的操作，并初始化展示的数据displayedItems和当前索引currentIndex。然后，通过点击按钮来加载更多数据，每次加载itemsPerLoad个元素，将其拼接到displayedItems中，并更新当前索引。这样就实现了分页的效果。

通过使用v-if来动态渲染并销毁元素，而不是通过v-show来隐藏元素，可以有效提高页面的性能。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

v-if 会根据true false来创建
v-show 相当于占位，只是控制显示隐藏