computed 和methods
关于computed 官方给出的解释是
对于任何复杂逻辑，你都应当使用计算属性。
并且贴出了以下代码
例子很简单，我们可以看到，computed属性可以当变量使用。
除了computed可以当变量使用以外，他和methods还有什么区别呢
请看以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
background-color: #8080ff;
}
</style>
</head>
<body>
<div id="app">
<p>{{ c_reverse_msg}}</p>
<p>{{m_reverse_msg()}}</p>
<input type="text" v-model="test">
</div>
<script src="../dep/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "123456",
test:"aa"
},
methods: {
m_reverse_msg() {
console.log(1)
return this.msg.split("").reverse().join("")
}
},
computed: {
c_reverse_msg() {
console.log(2)
return this.msg.split("").reverse().join("")
}
}
})
</script>
</body>
</html>
</script>
</body>
</html>
代码运行结果如下：
控制台输出结果如下：
我们可以看出，当页面第一次刷新的时候， m_reverse_msg()和 c_reverse_msg()方法都调用了，这时候我们改变输入框的值，也就是“test”的值，
我们可以看到控制台输出了一个“1”，也就是说， m_reverse_msg函数再次调用，而 c_reverse_msg函数没有调用。接下来，我们在控制台直接改变msg的值：
这时候，我们发现： m_reverse_msg函数和c_reverse_msg函数没全部都再次调用了，也就是说，当msg的值发生改变，页面重新渲染， m_reverse_msg函数和c_reverse_msg函数都调用了。
由此我们可以得到以下结论：
页面只要重新渲染，methods都会执行一次，而computed是基于它们的依赖进行缓存的。只有在它的相关依赖发生改变时才会重新求值。
缓存的好处在于：假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。在这种情况下，computed的这一特点，将大大提高我们的代码性能。
computed 和watch
当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行
异步
或开销较大的操作时，你可以使用 watch。
computed可以同时检测多个数据变化，watch不可以
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName//监听firstName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val//监听lastName
}
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName//同时监听firstName、lastName
}
}
})