vue什么时候用计算什么时候用方法 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue中的计算属性（computed）和方法（methods）都用于处理数据和操作，但是它们的使用场景有所不同。

计算属性主要用来对数据进行计算或转换，并返回一个新的值。它们是基于依赖的响应式系统的，只有当计算属性内部使用的数据发生变化时，计算属性才会重新计算。因此，适合用于需要依赖多个数据进行计算得出结果的场景。

举个例子，假设有一个商品列表，列表中的每个商品包含价格和折扣两个属性。若需要计算出打折后的价格，可以使用计算属性来实现。在计算属性内部，可以根据价格和折扣来计算出最终的打折价，并返回该值。

data() {
  return {
    products: [
      { name: '商品A', price: 100, discount: 0.8 },
      { name: '商品B', price: 200, discount: 0.5 },
      { name: '商品C', price: 150, discount: 0.6 }
    ]
  }
},
computed: {
  discountedProducts() {
    return this.products.map(product => {
      product.discountPrice = product.price * product.discount;
      return product;
    });
  }
}

在模板中使用计算属性：

<ul>
  <li v-for="product in discountedProducts">
    {{ product.name }} 优惠价：{{ product.discountPrice }}
  </li>
</ul>

方法（methods）主要用于响应用户的操作和事件，例如点击按钮、处理表单提交等。方法可以直接在模板中调用，也可以在其他方法中调用。方法中可以访问Vue实例的数据和其他方法。

当需要在模板中执行一些复杂的逻辑或需要手动触发计算时，可以使用方法。与计算属性不同，方法不会缓存计算结果，每次调用方法都会重新执行。

举个例子，假设有一个按钮，点击按钮时需要将商品列表的所有商品价格加倍。这时可以使用方法来实现。

methods: {
  doublePrices() {
    this.products.forEach(product => {
      product.price *= 2;
    });
  }
}

在模板中调用方法：

<button @click="doublePrices">价格加倍</button>

计算属性和方法各有其适用的场景，根据具体的需求来选择合适的方式。一般来说，如果需要对数据进行计算、转换或过滤，并且依赖的数据会发生变化，可以使用计算属性；如果只是简单的响应用户的操作或事件，并且不需要缓存计算结果，可以使用方法。

2年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在Vue中，计算属性和方法都可以用来处理数据逻辑，但在不同的情况下选择使用计算属性或方法会更合适。

计算属性适用于依赖其他数据进行计算的情况。当一个变量的值依赖于其他多个变量的值时，使用计算属性可以更方便地实现，因为计算属性会自动追踪所依赖的数据，并且只在相关数据发生改变时重新计算。
计算属性可以缓存计算结果。当计算一个值的过程比较耗时，但其结果又是稳定的，并且被多处使用时，使用计算属性可以避免重复计算，提高性能。
方法适用于触发某个事件或行为的情况。当需要响应用户的操作或事件时，最好使用方法来处理相关的逻辑。
方法没有缓存。方法每次调用时都会重新执行其中的代码逻辑，不会缓存之前的结果。所以，当一个方法需要多次调用并且每次调用的结果可能不同的情况下，使用方法更合适。
方法可以接受参数。如果需要在执行逻辑时传递参数，那么只能使用方法，因为计算属性不能接受参数。

综上所述，当需要根据其他数据进行计算，并且计算结果会被多处使用且稳定时，使用计算属性更合适；当需要触发某个事件或行为，并且逻辑中需要传递参数时，使用方法更合适。需要根据具体的场景来选择使用计算属性或方法。

2年前 0条评论

worktile

Worktile官方账号

在Vue中，计算属性（computed）和方法（methods）是用来处理Vue实例中的逻辑和数据的两种常用选项。它们都可以根据需要在模板中使用，但适用的场景和用法有所不同。

计算属性主要用于对于已经存在的数据进行计算或处理，并返回一个新的值。它们的结果会被缓存，只有在相关的响应式数据改变时才会重新计算。

方法则是用于执行一些具体的操作，比如事件处理、异步操作等。方法不会被缓存，每次使用都会进行执行。

下面我们将从不同的角度来详细探讨何时使用计算属性和方法。

根据数据的依赖关系来选择：
计算属性是基于依赖的响应式数据进行计算的，它会根据数据的变化自动重新计算，而不需要手动调用。如果一个数据的值依赖于其他一个或多个响应式数据的值，这时可以使用计算属性。例如，计算两个数的和：

computed: {
  sum() {
    return this.a + this.b
  }
}

方法则是在需要的时候手动调用的，它没有数据的依赖关系。如果一个操作是无需依赖其他数据的，或者需要手动触发的，这时候可以使用方法。例如，点击按钮触发事件：

methods: {
  handleClick() {
    console.log('Button clicked')
  }
}

根据使用场景来选择：
计算属性适用于那些需要根据数据进行计算并即时更新结果的场景，例如根据用户输入计算总价、过滤列表等。计算属性还可以进行复杂的计算，例如排序、格式化等。计算属性的结果在模板中使用时，可以像普通的属性一样直接绑定。

方法适用于那些需要执行一些具体操作的场景，例如向服务器发送请求、执行一些动画效果等。方法通常是通过事件或指令来调用的。方法在模板中使用时，需要使用方法调用的语法。

根据性能考虑来选择：
由于计算属性的结果会被缓存，只有在相关响应式数据变化时才会重新计算，因此在频繁使用的场景下会有更好的性能表现。而方法则需要在每次使用时都重新执行，对于计算开销较大的场景可能影响性能。

总结来说，计算属性适用于需要根据已有数据进行计算的场景，并且需要缓存计算结果。方法适用于执行一些具体操作的场景，并且需要手动调用。在使用时需要根据数据的依赖关系、使用场景和性能等因素进行选择。

2年前 0条评论