vue什么时候用methods什么时候用computed

Methods 和 Computed 是 Vue 中两种不同的方法。Methods 用于处理事件响应、表单处理等对象中的操作。Computed 用于监控自己的变量是否改变，从而决定是否需要重新计算。一般来说，当我们需要执行一个事件响应或者表单处理时，应该使用 Methods。当我们需要监控某个变量的变化时，应该使用 Computed。

相关问题

vue 什么时候使用computed

在Vue中，computed是一种计算属性，最常用的场景是在模板中使用需要经过计算才能得到的数据。相比使用methods，computed具有缓存功能，只有在它的依赖发生改变时才会重新计算，可以优化性能。

当需要对一个或多个data属性进行某种计算，并把这些计算的结果展示给用户时，可以使用computed。例如，在一个购物车应用中，需要计算购物车中所有商品的总价格，可以使用computed来计算，代码如下：

<template>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 10 },
        { id: 2, name: '商品2', price: 20 },
        { id: 3, name: '商品3', price: 30 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.products.reduce((total, product) => total + product.price, 0);
    }
  }
};
</script>

在模板中，可以直接使用totalPrice来展示购物车中所有商品的价格总和。当增加或删除商品时，Vue会自动更新totalPrice的值。

除此之外，还有一种场景是当需要对data属性进行监听并在其发生变化时进行一些操作时，可以使用computed。例如，在一个搜索应用中，需要对输入的关键词进行搜索，可以使用computed来监听关键词的变化并触发搜索操作。

综上所述，在需要对data属性进行计算或监听时，可以使用computed来解决问题。

vue中computed和methods区别

### 回答1：
在Vue中，computed和methods都是用于定义组件的方法，但是它们之间有一些区别。

computed属性是一个计算属性，它的值是由组件中的其他属性计算而来的。computed属性会缓存其计算结果，只有在它的相关属性发生改变时才会重新计算。它通常用于需要根据其他属性计算得到的数据。

而methods属性则是用于定义组件的方法。它们不会像computed属性一样缓存结果，每次调用时都会重新计算。methods通常用于处理用户交互事件等方法。

因此，computed属性适用于需要根据其他属性计算得到的数据，而methods属性适用于处理用户交互事件等方法。

### 回答2：
Vue的computed和methods都是由Vue提供的方法，它们的作用是对Vue的数据进行处理，然后返回一个新的数据。

但是它们之间有不同的特点和适用场景。

1. computed：

computed是Vue中的计算属性，其值会被缓存，在Vue实例所依赖的数据发生变化时，computed才会重新计算；

computed中的属性具有响应式，当被依赖的数据发生变化时，computed才会重新求值，而当依赖的数据没有发生变化时，调用computed会直接返回之前缓存的结果；

computed的本质是函数，通过return返回计算结果，可以像访问数据属性一样直接访问computed属性，而不必写成方法的形式。

使用场景：

computed适用于一些需要数据计算的场景，例如根据用户数量和每个用户的销售额计算出总销售额，或者根据用户输入的搜索关键词进行相关搜索等。

当需要多处用到某个计算结果时，使用computed可以避免重复计算。

2. methods：

methods是Vue中的方法调用，每次访问时都会重新计算，跟普通函数一样只有在被调用时才会执行；

methods中的属性不具有响应式，当被依赖的数据发生变化时，如果没有调用methods属性会一直保持之前的值，而不会重新计算；

methods需要通过函数调用的方式才能返回数据，需要在Vue实例中用methods对象声明所有的方法。

使用场景：

methods适用于一些用户操作的场景，例如点击按钮、输入框输入等；

当需要通过交互进行数据的改变时，可以使用methods方法来实时更新视图。

综上所述，computed适用于数据依赖关系比较强，需要实时刷新计算结果的场合；而methods则适用于用户交互等场景，需要手动触发方法执行的场合。通常情况下，如果只是简单的计算，使用computed会更方便一些；而如果需要进行一些复杂的业务逻辑处理，或需要进行一些异步操作，就应该使用methods。

### 回答3：
Vue是一种前端框架，用于快速构建交互式Web应用程序，是响应式编程的主要架构。Vue组件包括数据状态、计算属性、方法和生命周期函数等。在Vue中，computed和methods是两种常用的组件属性。

computed属性将自动缓存结果。每当依赖项更改时，computed属性将重新计算结果，但仅在需要时才这样做。computed属性计算结果只要依赖项不变，就不会再次计算。在基于依赖项的场景中，computed属性比methods更高效，因为methods在重新渲染时会重新计算结果。

methods属性定义组件的方法。这些方法是在Vue实例中定义的函数，可被实例访问和调用。每当方法被调用时，都会计算与方法相关的代码并执行它。与computed属性不同，方法没有缓存，每次调用方法时都会执行相关代码。在较小的应用程序中，没必要担心调用方法的性能问题。但是，为获得更好的性能，最好使用computed属性而不是methods。

总结一下，computed属性和methods属性在调用和性能方面有所不同。computed属性具有自动缓存结果的能力，适用于依赖项的场景；而methods属性是在实例化时定义的方法，用于访问计算属性或在组件内部添加其他功能（例如，点击事件）。在大多数情况下，对于复杂的计算逻辑，应使用computed属性，但对于简单功能，可选择methods属性。