methods与computed的区别

1.methods就是普通的函数调用，computed是属性调用 ( 所以调用methods要加()，调用computed不用加() )

2.computed有缓存功能，methods没有

computed

setter和getter

默认没有setter，通常直接定义 出来的都是getter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-计算属性setter和getter</title>
</head>
<body>

<div id="app">
  <h2>{{fullName}}</h2>  
</div>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Kobe',
      lastName: 'Bryant'
    },
    computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
        }
    }
})
</script>

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

缓存机制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-computed和methods的区别</title>
</head>
<body>

<div id="app">
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>

  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'LeBron',
      lastName: 'James'
    },
    computed: {
      fullName() {
        console.log('调用了computed中的fullName'); // 打印3次
        return this.firstName + ' ' + this.lastName
      }
    },
    methods: {
      getFullName() {
        console.log('调用了methods中的getFullName'); // 打印1次
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

</body>
</html>

当一个函数被重复调用，但是他的数据没有变化的时候，用computed比methods效率高

<!--HTML部分-->

<div id=“app“>
    <h1>{{message}}</h1>
    <p class=“test1“>{{methodTest}}</p>
    <p class=“test2-1“>{{methodTest()}}</p>
    <p class=“test2-2“>{{methodTest()}}</p>
    <p class=“test2-3“>{{methodTest()}}</p>
    <p class=“test3-1“>{{computedTest}}</p>
    <p class=“test3-2“>{{computedTest}}</p>
</div>


<!–script部分–>
let vm = new Vue({
    el: ‘#app’,
    data: {
        message: ‘我是消息，’
    },
    methods: {
        methodTest() {
            return this.message + ‘现在我用的是methods’
        }
    },
    computed: {
        computedTest() {
            return this.message + ‘现在我用的是computed’
        }
    }
})
:hexoPostRenderEscape–>

在上面的例子中，methods定义的方法是以函数调用的形式来访问的，那么test2-1,test2-2,test2-3是反复地将methodTest方法运行了三遍，如果我们碰到一个场景，需要1000个methodTest的返回值，那么毫无疑问，这势必造成大量的浪费
更恐怖的是，如果你更改了message的值，那么这1000个methodTest方法每一个又会重新计算。。。。

所以，官方文档才反复强调对于任何复杂逻辑，你都应当使用计算属性

computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新求值

如上例，在Vue实例化的时候，computed定义computedTest方法会做一次计算，返回一个值，在随后的代码编写中，只要computedTest方法依赖的message数据不发生改变，computedTest方法是不会重新计算的，也就是说test3-1,test3-2是直接拿到了返回值，而非是computedTest方法重新计算的结果。

这样的好处也是显而易见的，同样的，如果我们碰到一个场景，需要1000个computedTest的返回值，那么毫无疑问，这相对于methods而言，将大大地节约内存

哪怕你改变了message的值，computedTest也只会计算一次而已在上面的例子中，methods定义的方法是以函数调用的形式来访问的，那么test2-1,test2-2,test2-3是反复地将methodTest方法运行了三遍，如果我们碰到一个场景，需要1000个methodTest的返回值，那么毫无疑问，这势必造成大量的浪费
更恐怖的是，如果你更改了message的值，那么这1000个methodTest方法每一个又会重新计算。。。。

所以，官方文档才反复强调对于任何复杂逻辑，你都应当使用计算属性

computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新求值

如上例，在Vue实例化的时候，computed定义computedTest方法会做一次计算，返回一个值，在随后的代码编写中，只要computedTest方法依赖的message数据不发生改变，computedTest方法是不会重新计算的，也就是说test3-1,test3-2是直接拿到了返回值，而非是computedTest方法重新计算的结果。

这样的好处也是显而易见的，同样的，如果我们碰到一个场景，需要1000个computedTest的返回值，那么毫无疑问，这相对于methods而言，将大大地节约内存
哪怕你改变了message的值，computedTest也只会计算一次而已