计算属性和watch以及methods的区别？

methods

机制：methods内的函数和普通的函数没有区别。

触发：methods内的函数执行的时候，才能触发；

注意：当页面渲染的时候，也会执行下面代码中的methodsN函数；methods内的函数命名不能与data中的属性重名。

computed

机制：{{函数名}} 《—return 《— 参与计算的DATA中的值

触发：当参与计算的值发生变化的时候，页面中的{{函数名}}也发生变化，就会触发该函数

注意：return 会将函数名 返回到和computed一个级别，这样函数名就是Vue实例vm的属性，所以才能在标签中使用该属性
有缓存，所以该值不变下的页面渲染不会触发该函数

watch

机制：watch内的函数名 === data中的属性名
触发：data中的属性名对应的值发生改变时，就会触发watch内的函数就执行
注意：有缓存，所以该值不变下的页面渲染不会触发该函数；

总结

监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据。当数据变化时触发其他操作，函数有两个参数： immediate：组件加载立即触发回调函数执行； deep: 深度监听；为了发现对象内部值的变化，复杂类型的数据时使用，例如：数组中的对象内容的改变，注意：监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到；

methods 跟前面的都不一样，我们通常在这里写入方法，只要调用就会重新执行一次，相应的有一些触发条件，在某些时候 methods 和 computed 看不出来具体的差别，但是一旦在运算量比较复杂的页面中，就会体现出不一样。

computed 是具有缓存的，这就意味着只要计算属性的依赖没有进行相应的数据更新，那么 computed 会直接从缓存中获取值，多次访问都会返回之前的计算结果。