Vue3项目：重复渲染代码的优雅处理技巧

2023-09-14 15:46:08

普通的场景

最近在做Vue3项目的时候，在思考一个小问题，其实是每个人都做过的一个场景，很简单，看下方代码：

<template>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

其实就是一个普通的不能再普通的循环遍历渲染的案例，咱们往下接着看，如果这样的遍历在同一个页面中出现了十次，二十次，甚至更多，那么就会产生大量的重复代码，这显然不是我们想要的，那么这个时候我们该如何处理呢？

使用虚拟列表

虚拟列表是一种常用的优化技术，它可以减少需要渲染的元素数量。在Vue3中，我们可以使用<VirtualList>组件来实现虚拟列表。

<template>
  <VirtualList :items="list" :key="item.id">
    <template v-slot="{ item }">
      <li>{{ item.name }}</li>
    </template>
  </VirtualList>
</template>

<script>
import VirtualList from 'virtual-list';

export default {
  components: { VirtualList },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

<VirtualList>组件会根据当前视口的大小和滚动位置来决定渲染哪些元素。这样可以大大减少需要渲染的元素数量，从而提高渲染性能。

使用虚拟滚动

虚拟滚动也是一种常用的优化技术，它可以减少需要渲染的元素数量。在Vue3中，我们可以使用<VirtualScroll>组件来实现虚拟滚动。

<template>
  <VirtualScroll :items="list" :key="item.id">
    <template v-slot="{ item }">
      <li>{{ item.name }}</li>
    </template>
  </VirtualScroll>
</template>

<script>
import VirtualScroll from 'virtual-scroll';

export default {
  components: { VirtualScroll },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

<VirtualScroll>组件会根据当前视口的大小和滚动位置来决定渲染哪些元素。这样可以大大减少需要渲染的元素数量，从而提高渲染性能。

使用组件化

组件化是Vue3中的一种重要特性，它可以将复杂的组件分解成更小的组件，从而提高代码的可维护性和重用性。

在处理重复渲染代码时，我们可以将重复的代码封装成一个组件，然后在需要的时候使用该组件。

<template>
  <ItemList :items="list" />
</template>

<script>
import ItemList from './ItemList.vue';

export default {
  components: { ItemList },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

// ItemList.vue
<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
};
</script>