vue computed 与 watch 区别

1、watch

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 

$watch()

，遍历
watch 对象的每一个属性

html:

<div>
<input type="text" v-model="firstAge" />
<input type="text" v-model="lastAge" />
<input type="text" v-model="sumAge" />
</div>

js:
return{
firstAge:'10',
lastAge:'20',
sumAge:'10 20'
}

watch:{
firstAge: function(val){
this.sumAge = val + this.lastAge;
},
lastAge: function(val){
this.sumAge = this.firstAge + val;
}
}

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

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果实例范畴之外的依赖 (比如非响应式的 not reactive) 是不会触发计算属性更新的。

js:

computed:{
sumAge:function(){
return this.firstAge + ' ' + this.lastAge;

}
}

总结：

计算属性是计算属性（computed），观察是观察( watch )。

计算属性顾名思义就是通过其他变量计算得来的另一个属性，fullName在它所依赖firstName，lastName这两个变量变化时重新计算自己的值。

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

而观察watch是观察一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以检测页码执行获取数据的函数。
详细查看文档，多研究文档资料  https://cn.vuejs.org/