在此记录学习Vue的每一步，做到每一步一个手印！
踩坑之一：methods和computed的区别
methods是定义需要执行的函数，computed是计算属性（可以将属性值执行一系列操作之后返回新值）。
那么问题来了。mothods定义函数也可以达到同样的方法，那么为什么需要computed呢?
官方文档给出如下解释
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
很抽象，总结出关键部分，
计算属性基于响应式依赖，可以进行缓存。
我用自己的方式理解了一下响应式依赖。贴上代码如下所示。
computed: {
message_1:function () {
return this.message.split('').reverse().join('')
}
}这种反转字符串的computed写法和官方文档methods写法应该可以得到相同的结果。响应式依赖就如官方文档所说，只要message（这里的message即是响应式依赖的值）值不改变，计算属性可以不执行，直接从缓存读取上一次的值。为此我做了一个实验。
这里贴上我的代码
<template>
<div>
<div>{{ReverseFunction()}}</div>
<div>{{message_1}}</div>
</div>
</template>
<script>
export default {
data() {
return {
message:'javascript'
}
},
methods: {
ReverseFunction:function(){
console.log("methods执行了！")
return this.message.split('').reverse().join('')
}
},
computed: {
message_1:function () {
console.log("computed执行了!")
return this.message.split('').reverse().join('')
}
},
}
</script>
代码结构相当之简单，两个div分别对应着methods反转字符串的值和computed的反转字符串的值。
我们来看view视图层的区别，下面是第一次执行的视图。
methods和computed中的函数正常执行，正常打印输出语句。接下来我们在dom结构上做操作，我做的是在div中间插入了一个无意义的空格。重新进入vue项目看控制台输出如下。
我改变了dom结构，virtual dom树重新渲染，数据重新挂载到dom结构中，这时候methods和computed的差别就出现了。由于两者的响应式依赖（这里也就是指的message）没有改变。所以computed不会执行，直接从缓存中拿数据。但是methods就不一样了，它每一次渲染都会老老实实的执行函数并将结果返回。由此可以看出methods方法比较消耗性能。
所以，在实际项目中按照自己的需求将属性值写入methods还是computed。
最后，如果你的需求是监听某个属性的值而改变另外的值，很容易滥用watch，Vue官方推荐的做法是使用computed计算属性来实现。
