五年vue2老项目代码分析: computed请别再滥用了

2023-09-23 14:05:25

作为一名技术人员，时不时会接手一些别人写的项目。当我接手一个五年老前端做的vue2项目时，内心是十分排斥的，因为我知道这种项目很有可能会存在一些问题，果不其然，当我开始学习代码时，我发现这个项目的computed使用非常不合理。

滥用computed的弊端

在vue2中，computed是一个非常重要的特性，它允许我们创建响应式的计算属性。但是，如果computed使用不当，就会带来很多问题。

首先，滥用computed会导致代码难以阅读和维护。因为computed属性是在组件内定义的，所以它们不会出现在模板中。这使得在阅读代码时很难理解这些属性是如何计算出来的，特别是对于不熟悉vue2的新手来说。

另一个滥用computed的弊端是会导致性能问题。因为computed属性是响应式的，所以每次依赖的属性改变时，computed属性也会重新计算。如果computed属性的依赖关系很复杂，或者计算过程非常耗时，那么这可能会导致性能问题。

既然滥用computed会带来这么多问题，那么我们该如何正确使用computed呢？

首先，我们需要明确computed的用途。computed属性应该用来计算那些依赖于其他属性的值。这些值应该是不经常改变的，或者计算过程比较简单的。

例如，我们可以使用computed属性来计算一个组件的总价，这个总价依赖于组件中各个商品的价格。这个计算过程并不复杂，而且总价不会经常改变。所以，使用computed属性来计算总价是一个非常合理的选择。

除了computed之外，vue2还提供了其他一些响应式工具，例如vuex和watch。这些工具都有各自的优缺点，我们应该根据不同的情况来选择最合适的工具。

computed: computed属性适合用来计算那些依赖于其他属性的值，这些值应该是不经常改变的，或者计算过程比较简单的。
vuex: vuex是一个状态管理工具，它可以帮助我们管理组件之间的数据共享。vuex非常适合用来存储那些需要在多个组件之间共享的数据，例如用户登录信息、购物车商品信息等。
watch: watch是一个侦听器，它可以用来侦听某个属性的变化。当属性改变时，watch就会执行我们指定的回调函数。watch非常适合用来监听那些需要在属性改变时执行某些操作的情况，例如在用户输入框输入内容时，我们需要更新组件中的数据。