计算属性和methods的区别

• computed是响应式的，methods并非响应式。
• 调用方式不一样，computed定义的成员像属性一样访问，methods定义的成员必须以函数形式调用。
• computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行
• computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的

• computed：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

• methods：methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

• watch：是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

计算属性使用场景

我们想去时刻监控数据的变化，在视图上显示不同的结果，当然这两中方法都可以实现这种效果，这个时候用computed就比较合理了，因为computed是可缓存的，只要数据层值不改变，computed就不会去改变，而且可缓存，如果数据层的值变了，computed就会实时更新到视图层上，所以说computed是响应式的。
还有一个不同点就是在于computed是以对象的属性方式存在的，在视图层直接调用就可以得到值，例如：

1

<div>{{msg}}</div>

而methods必须以函数形式调用，例如：,

1

<div>{{msg()}}</div>

可见，computed直接以对象属性方式调用，而methods必须要函数执行才可以得到结果。