当前位置： 技术文章>> Vue 中如何使用 computed 属性避免不必要的重新渲染？

文章标题：Vue 中如何使用 computed 属性避免不必要的重新渲染？
  • 文章分类: 后端
  • 5895 阅读

在Vue框架中，computed 属性是一个强大而优雅的特性，它允许我们定义一些基于组件响应式数据源的派生值。这些派生值只有在相关依赖项发生变化时才会重新计算，这极大地提高了应用的性能和效率，避免了不必要的DOM重绘和重排。接下来，我们将深入探讨如何在Vue中使用computed属性来优化渲染性能，并通过具体实例来展示其在实际项目中的应用。

理解Vue的响应式系统

在深入探讨computed属性之前，理解Vue的响应式系统是非常重要的。Vue的响应式系统是基于ES5的Object.defineProperty（在Vue 3中则是基于Proxy）实现的，它使得Vue能够追踪数据的变化，并在数据变化时自动执行相关的更新操作。在Vue组件中，data、props、computed属性以及methods都是响应式的，但它们的作用和触发更新的方式有所不同。

computed属性的特点

computed属性基于它们的响应式依赖进行缓存。只有在相关响应式依赖发生改变时，computed属性才会重新求值。这种特性使得computed属性非常适合执行开销较大的计算操作，因为它们只在必要时才会重新计算，从而避免了不必要的计算开销和渲染。

避免不必要的重新渲染

在Vue应用中，不必要的重新渲染是性能瓶颈的主要来源之一。当组件的响应式数据发生变化时，Vue会触发组件的重新渲染。然而，如果组件的某些部分并不依赖于变化的数据，那么这些部分的重新渲染就是不必要的。使用computed属性可以精确地控制哪些数据变化会触发哪些部分的重新渲染，从而避免不必要的渲染。

computed属性的使用场景

  1. 依赖多个数据源的派生值：当某个值依赖于组件中多个数据源时，使用computed属性可以方便地计算这个值，并且只有当这些数据源之一发生变化时，计算才会重新执行。

  2. 复杂的计算逻辑：如果计算逻辑比较复杂，或者涉及到多个步骤的计算，将这些逻辑放在computed属性中可以使得组件的代码更加清晰和易于维护。

  3. 性能优化：通过缓存计算结果，computed属性避免了在每次数据变化时都执行复杂的计算逻辑，从而提高了应用的性能。

实例演示

假设我们正在开发一个电商网站，需要显示商品列表，并且要求显示每个商品的价格折扣信息。我们可以使用computed属性来计算每个商品的折扣价格。

<template>
  <div>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - 原价: {{ product.price }} - 折扣价: {{ discountedPrice(product) }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100, discount: 0.8 },
        { id: 2, name: '商品B', price: 200, discount: 0.7 },
        // 更多商品...
      ]
    };
  },
  methods: {
    discountedPrice(product) {
      return product.price * product.discount;
    }
  }
};
</script>

然而，上述代码中的discountedPrice方法会在每次渲染时都被调用，即使商品的价格和折扣率没有变化。这会导致不必要的性能开销，尤其是在商品列表很长时。我们可以通过将discountedPrice方法改为computed属性（虽然这里需要一点变通，因为computed通常用于组件内部数据，而不是方法参数），或者更常见的做法是，在组件内部为每个商品计算一个discountedPrice的computed属性（这在实际项目中可能通过计算属性映射或者getter函数在父组件中实现）。

但为了说明computed属性的应用，我们可以假设我们是在一个商品详情组件中，该组件接收商品作为prop，并计算其折扣价格：

<template>
  <div>
    {{ product.name }} - 原价: {{ product.price }} - 折扣价: {{ discountedPrice }}
  </div>
</template>

<script>
export default {
  props: ['product'],
  computed: {
    discountedPrice() {
      return this.product.price * this.product.discount;
    }
  }
};
</script>

在这个例子中，discountedPrice是一个computed属性，它依赖于product.price和product.discount。只有当这两个值之一发生变化时，discountedPrice才会重新计算。这样，我们就可以避免在每次组件渲染时都执行这个计算，从而提高应用的性能。

注意事项

  • 避免在computed属性中进行异步操作：computed属性应该是同步的，并且基于其依赖项返回一个值。如果需要进行异步操作，请考虑使用Vue的watch属性或者Vue 3中的reactive和ref结合watch或watchEffect来实现。

  • 避免在computed属性中修改数据：computed属性应该是只读的，即它们应该只返回基于其依赖项的值，而不应该修改这些依赖项。如果需要根据计算结果来修改数据，请考虑使用methods或watch。

  • 使用computed属性进行缓存：computed属性的缓存特性使得它们非常适合执行开销较大的计算。然而，这也意味着如果计算依赖于的响应式数据没有变化，那么计算将不会执行，这可能导致一些预期之外的行为（例如，如果计算依赖于一个异步数据，并且该数据在组件的生命周期内没有变化，则计算将不会重新执行）。在这种情况下，请确保你的应用逻辑能够处理这种情况。

总结

在Vue中，computed属性是优化渲染性能的重要工具。它们允许我们定义基于组件响应式数据源的派生值，并且这些派生值只有在相关依赖项发生变化时才会重新计算。通过合理使用computed属性，我们可以避免不必要的计算开销和渲染，从而提高应用的性能和用户体验。在开发Vue应用时，我们应该充分利用computed属性的这一特性，来构建更加高效和可维护的组件。

在码小课网站上，你可以找到更多关于Vue性能优化的文章和教程，帮助你深入理解Vue的响应式系统和computed属性的工作原理，以及如何在实际项目中应用这些技术来优化应用的性能。

推荐文章