computed计算属性:*

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要响应式数据还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。

computed: { now: function () { return Date.now() } }
//计算属性不更新，因为 `Date.now()` 不是响应式依赖

我们为什么需要缓存？ 假设我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性B依赖于A。如果没有缓存，我们将不可避免的多次执行A的 getter！这样会大大降低效率.

methods方法:

相比之下，每当触发重新渲染时，调用方法将再次执行函数。

watch监听:

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

具体问题具体分析

//运用watch监听
var vm = new Vue({ el: '#demo', 
data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, 
watch: { 
firstName: function (val) { this.fullName = val + ' ' + this.lastName }, 
lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })

var vm = new Vue({ 
el: '#demo', 
data: { firstName: 'Foo', lastName: 'Bar' }, 
computed: { 
fullName: function () { 
return this.firstName + ' ' + this.lastName 
} 
} 
})

在此问题上相比,有时还是运用计算属性好一点.

面试题

computed和watch的区别?

computed看起来是一个函数其实是计算属性，是计算出一个值的，当我们在调用computed时候不需要加括号，可以当属性一样用，computed可以根据依赖缓存，如果依赖不变，那么computed的值就不会重新计算。 watch是用来监听的，watch有两个属性，immediate是表示是否在第一次渲染的时候就执行监听的函数，deep表示当我们在监听一个对象的时候，是否也监听其内部的属性，还有一个handle函数表示监听的属性变化的时候执行的函数

computed和methods有什么区别?

当获取计算属性时,实际上是在调用计算属性的getter方法.vue会收集计算属性的依赖,并缓存计算属性的返回结果.只有当依赖变化后才会重新计算, 方法没有缓存,每次调用方法都会导致重新执行. 计算属性的getter和setter参数固定,getter没有参数,setter只有一个参数,而方法的参数不限. 由于以上的这些区别,因此计算属性通常是根据已有数据得到其他数据,并在得到其他数据的过程中不建议使用异步,当时间,随机数等副作用操作. 实际上,他们最重要的区别是含义上的区别.计算属性含义上是一个数据,可以读取也可以赋值;方法含义上是一个操作,用于处理一些事情.