Vue中计算属性computed和方法methods的区别

Vue中计算属性和方法的区别

这里我们先看一下两段代码如下：
computed：

<template>
 <div id="example">
   <p>newMessage: "{{ newMessage}}"</p>
 </div>
</template>
<script>
export default {
 data() {
   return {
     message: "HelloWorld"
   };
 },
 computed: {
   // 计算属性的 getter
   newMessage: function () {
     return this.message.split('').reverse().join('')
   }
 }
};
</script>

methods：

<template>
 <div id="example">
   <p>newMessage: "{{ newMessage()}}"</p>
 </div>
</template>
<script>
export default {
 data() {
   return {
     message: "HelloWorld"
   };
 },
 methods: {
   newMessage: function () {
     return this.message.split('').reverse().join('')
   }
 }
};
</script>

这两种方法执行的结果都是相同的，但是不同的是计算属性会根据它所依赖的数据进行相应的缓存。只有它所依赖的数据发生了变化，它才会重新的计算自身的值。也就是说message只要不发生变化，无论访问多少次计算属性newMessage都不会再次执行函数，而是直接返回之前的值。

区别：

1. computed是带缓存的，只有依赖数据发生改变，才会重新进行计算，否则直接返回之前的计算结果，而methods里的函数在每次调用时候都要执行。
2. computed是响应式的，methods不是响应式的。
3. 调用方式不一样，computed的调用发生像属性一样访问，methods定义的成员必须以函数的形式调用。
4. computed中的成员可以只定义一个函数作为属性，也可以定义get/set变成可读写的属性，这点是methods不可以做到的。