vue 中的watch和computed的区别

compputed

compputed是计算属性，他会根据你所依赖的数据动态显示新的计算结果计算属性将被加入到 Vue 实例中。

所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例通过计算出来的属性不需要调用直接可以在 DOM 里使用Vue实例将会在实例化时调用$watch()，遍历watch对象的每一个属性

在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响

而且计算属性如果依赖不变的话，它就会变成缓存，computed的值就不会重新计算

watch

一个对象，键是data对应的数据，值是对应的回调函数。值也可以是方法名，或者包含选项的对象，当data的数据发生变化时，就会发生一个回调，他有两个参数，一个val（修改后的data数据），一个是OldVal（原来的data数据）

注意：不应该使用箭头函数来定义watcher函数，因为箭头函数没有this，它的this会继承它的父级函数，但是它的父级函数是window，导致箭头函数的this指向window，而不是Vue实例