vue中的methods和computed的区别

首先问一个问题，当我们在模板中来显示一份经过对数据进行复杂计算之后的结果时，我们有两种结果方案:

• 计算属性
• 函数

那么我们应该如何选择呢？

• methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。
• computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行,计算属性会做缓存，提高渲染的性能

下面用一个案例来比较一下两者的区别

<template>
  <div id="#app">
    <p>函数{{ fn() }}</p>
    <p>函数{{ fn() }}</p>
    <p>函数{{ fn() }}</p>
    <hr />
    <p>计算属性{{ com }}</p>
    <p>计算属性{{ com }}</p>
    <p>计算属性{{ com }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10,
      num2: 100,
    };
  },
  methods: {
    fn() {
      console.log("methods中的函数被调用了");
      return this.num1 * 3;
    },
  },
  computed: {
    com() {
      console.log("computed中的函数被调用了");
      return this.num2 * 3;
    },
  },
};
</script>

<style>
</style>

效果图如下

对于普通的函数，在页面上用到了三次，它就会执行三次,但是计算属性就不一样，如果计算属性所依赖的数据项并没有发生变化，则就算使用多个计算函数，其函数也只执行一次, 因为它把结果缓存起来了,由于计算属性有缓存，虽然在页面上用到三次，但它的函数体只执行一次。

总结：

1.computed是响应式的，methods并非响应式。
2.computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行。
3.computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的
4.调用方式不一样，computed定义的成员像属性一样访问，例如上面的{{com}},methods定义的成员必须以函数形式调用,例如上面的{{fn()}}

在我们的实际开发中，有时很难去确定具体用computed还是methods，因为这两种方法最后的到的结果是一样的，但是他们的原理和用法却完全不同，比如：我们想去时刻监控数据的变化，在视图上显示不同的结果，当然这两种方法都可以实现这种效果，这个时候用computed就比较合理了，因为computed是可缓存的，只要数据层值不改变，computed就不会去改变，而且可缓存，如果数据层的值变了，computed就会实时更新到视图层上，所以说computed是响应式的。