Vue当中methods、computed、watch之间的差异与区别

Vue当中methods、computed、watch之间的差异与区别

操作内容	methods	computed	watch
主被动	主动	被动	主动
触发次数	N次	1	N次
缓存	没有	有	没有
异步	可以	不可以	可以

1.methods是主动调用的，执行次数是根据调用次数来决定的，显然性能比较弱，执行的时候需要加上()；

2.computed是被动的，在调用以后会缓存处理，执行的时候不需要加()，不管执行几次computed计算函数都只被调用一次，它是不支持异步的；

3.不管是methods还是computed，它们的来源都是es6当中的class，methods其实就是class当中的普通方法，而computed其实就是class中的get/set方法。

4.watch是根据被监控内容的改变而触发的，它也有函数形式以及对象形式两种表现形式，而且可以对基础数据类型以及引用数据类型进行监控操作。

5.如果不进行指定设置，不管是函数以及对象的监控模式，监控都不触发。而想要实现第一次监控就触发只有在对象模式下才能够实现，并且要设置immediate为ture。

6.想要实现对深层的对象进行监控，函数书写模式也是无法实现的，得使用对象模式，并且设置属性deep为true。

7.watch监控的函数模式仅仅能够实现的是数据变化后我进行监控操作，而对象可以实现的是立即监控和深度监控。

8.watch是支持异步操作的

methods：主动调用，每次触发

computed：被动计算、缓存处理，一次触发，无法异步

watch：实时监控、立即监控、深度监控、支持异步

总结：

能用computed的不用methods、watch、 能用methods的不用watch，watch是最后的选择， 而且一定要注意，千万不要随便使用deep深度监控，性能会很差。 computed属性计算能够做的事情methods一定能做，而methods能够做的事情computed是不一定能够处理的。

注意：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数， 这样this的指向才是vm 或 组件实例对象。