关于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的这一特点，将大大提高我们的代码性能。
当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 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 } } })