computed计算属性vs方法methods

在Vue.js中，computed属性和methods方法都可以用于计算和处理数据。它们之间的区别在于：

1. computed属性是根据依赖的响应式数据进行计算的，只有当依赖发生改变时才会重新计算。而methods方法是通过方法调用执行的，每次调用都会重新执行。

2. computed属性是具有缓存的，只有在依赖发生改变时才会重新计算。这意味着在多个地方使用computed属性时，只有当依赖发生改变时，所有使用该computed属性的地方才会更新。而methods方法没有缓存，每次调用都会重新执行。

3. computed属性适用于那些依赖其他响应式数据计算的场景，例如根据输入值动态计算结果。而methods方法适用于那些需要进行一些操作，或者需要传递参数的场景。

示例

computed计算属性示例：

<template>
  <div>
    <p>{{ fullname }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullname() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>

methods方法示例：

<template>
  <div>
    <button @click="changeName">Change Name</button>
    <p>{{ fullname }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  methods: {
    changeName() {
      this.firstName = 'Jane';
      this.lastName = 'Smith';
    }
  },
  computed: {
    fullname() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>

在上面的示例中，fullname属性使用computed来计算出来，它依赖于firstName和lastName属性。在methods中定义了一个changeName方法，当点击按钮时，该方法会改变firstName和lastName的值，从而影响到fullname属性的值。

小例子
vue用methods和计算属性两种方法实现如下功能:· 输入圆的半径，求圆的周长、面积

使用methods方法实现：

<template>
  <div>
    <label for="radius">半径：</label>
    <input type="number" id="radius" v-model="radius">
    <button @click="calculateCircumference">计算周长</button>
    <button @click="calculateArea">计算面积</button>
    <p>周长：{{ circumference }}</p>
    <p>面积：{{ area }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radius: 0,
      circumference: 0,
      area: 0
    }
  },
  methods: {
    calculateCircumference() {
      this.circumference = 2 * Math.PI * this.radius;
    },
    calculateArea() {
      this.area = Math.PI * Math.pow(this.radius, 2);
    }
  }
}
</script>

使用computed计算属性实现：

<template>
  <div>
    <label for="radius">半径：</label>
    <input type="number" id="radius" v-model="radius">
    <p>周长：{{ circumference }}</p>
    <p>面积：{{ area }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radius: 0
    }
  },
  computed: {
    circumference() {
      return 2 * Math.PI * this.radius;
    },
    area() {
      return Math.PI * Math.pow(this.radius, 2);
    }
  }
}
</script>

无论是使用methods还是computed计算属性，实现的功能是一样的。输入半径后，点击按钮或自动计算出圆的周长和面积，并将结果显示在页面上。