在 Vue 中使用 computed 和 watch 时，性能问题探讨-阿里云开发者社区

在 Vue 中使用 computed 和 watch 时，性能问题探讨

2024-11-16 28

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

无影云电脑企业版，4核8GB 120小时 1个月

无影云电脑个人版，1个月黄金款+200核时

资源编排，不限时长

简介： 本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。

对于computed计算属性

合理利用缓存机制
- 原理：计算属性会自动缓存计算结果。只有当它的依赖项发生变化时，才会重新计算。因此，在编写计算属性时，要确保其内部逻辑只依赖于响应式数据，避免在计算过程中引入外部的、非响应式的数据或操作，这样可以充分利用缓存机制来提高性能。
- 示例：假设我们有一个组件，用于显示用户的全名，它由姓和名拼接而成。
```
  export default {
         
      data() {
         
          return {
         
              firstName: 'John',
              lastName: 'Doe'
          };
      },
      computed: {
         
          fullName() {
         
              return this.firstName + ' ' + this.lastName;
          }
      }
  }
```
  在这个例子中，fullName计算属性依赖于firstName和lastName，只要这两个数据没有变化，fullName的值就会从缓存中获取，而不会重新计算。

避免复杂计算逻辑的重复执行

原理：如果计算属性的计算逻辑很复杂，如涉及大量循环、复杂的数学运算等，要确保这些计算不会在不必要的时候被触发。避免在模板中使用会导致计算属性频繁重新计算的表达式，例如在v - if或v - for指令中使用复杂的计算属性表达式。

示例：假设我们有一个计算属性用于计算一个大型数组中满足特定条件的元素数量，并且在模板中有多个地方使用了这个计算属性。

  export default {
         
      data() {
         
          return {
         
              largeArray: [1, 2, 3, 4, 5,..., 1000] // 假设这是一个很大的数组
          };
      },
      computed: {
         
          countGreaterThanFive() {
         
              return this.largeArray.filter(num => num > 5).length;
          }
      }
  }

如果在模板中这样使用：

  <template>
      <div v - if="countGreaterThanFive > 10">
          <!-- 内容 -->
      </div>
      <div v - for="i in countGreaterThanFive">
          <!-- 内容 -->
      </div>
  </template>

每次渲染这两个元素时，countGreaterThanFive都会被重新计算。更好的做法是先将计算属性的值赋给一个变量，然后在模板中使用这个变量，如下：

  <template>
      <div v - if="count > 10">
          <!-- 内容 -->
      </div>
      <div v - for="i in count">
          <!-- 内容 -->
      </div>
  </template>

  export default {
         
      data() {
         
          return {
         
              largeArray: [1, 2, 3, 4, 5,..., 1000]
          };
      },
      computed: {
         
          countGreaterThanFive() {
         
              return this.largeArray.filter(num => num > 5).length;
          }
      },
      mounted() {
         
          this.count = this.countGreaterThanFive;
      }
  }

对于watch侦听器
- 避免过度监听数据变化
  - 原理：watch在每次被观察的数据发生变化时都会执行回调函数。如果在一个组件中过度使用watch来监听数据，尤其是那些频繁变化的数据，会导致性能下降。因此，只监听真正需要响应变化的关键数据。
  - 示例：假设我们有一个表单组件，有多个输入框，但只有当用户提交表单时，我们才关心所有输入框的数据是否完整。如果在watch中监听每个输入框的数据变化来进行验证，会造成不必要的性能开销。更好的做法是在提交表单时统一进行验证，而不是通过watch来监听每个输入框的数据变化。
- 谨慎使用深度监听（deep: true）
  - 原理：当对一个对象或数组使用watch并设置deep: true时，Vue会递归地监听对象或数组的每一个属性变化。这在处理复杂数据结构时可能会导致性能问题，因为每次属性的微小变化都会触发回调函数。只有在确实需要对数据结构的所有层次的变化做出响应时才使用深度监听。
  - 示例：假设我们有一个复杂的嵌套对象，用于存储用户配置信息。
```
  export default {
         
      data() {
         
          return {
         
              userConfig: {
         
                  profile: {
         
                      name: 'John',
                      age: 30
                  },
                  preferences: {
         
                      theme: 'dark',
                      language: 'en'
                  }
              }
          };
      },
      watch: {
         
          userConfig: {
         
              handler(newValue, oldValue) {
         
                  // 处理用户配置的变化
              },
              deep: true
          }
      }
  }
```
    在这个例子中，只要userConfig对象中的任何一个属性（如userConfig.profile.name、userConfig.preferences.theme等）发生变化，回调函数就会被触发。如果不需要对所有层次的变化都做出响应，可以考虑将对象拆分成更小的部分进行监听，或者使用计算属性来处理部分数据的变化。

在 Vue 中使用 computed 和 watch 时，性能问题探讨

弹性计算

热门文章

最新文章

相关课程

相关电子书