vue的计算属性computed和监视属性waatch的区别

共同的：都是用于监听数据变化的属性；

计算属性：必须有返回值return ，依赖其它属性值，其它属性值发生变化的时候就会重新计算 ；

监视属性：每当数据变化的时候就会触发执行，watch有两个新值和旧值的参数，watch的函数名必须和data的属性名一致，不需要依赖其它的数据，只在乎自己的数据是否发生变化，对于复杂数据要使用深度监听，deep:true 因为默认监听的时候只看地址的变化  ；immerdiate：true 页面首次加载的时候执行一次 ； 可以没有返回值return ；

区别：

1. computed是计算属性，产生新的数据，而且数据依赖其它的数据，watch不产生新的数据，是对已存在的数据的监视，是数据发生变化的回调函数 ；

2. computed必须有返回值，watch可以没有返回值；

　　ps：注意：computed必须有return，同时因为return是同步执行结果，因此computed中不能执行异步任务

3. computed不能有异步代码，watch可以运行异步代码；

 

 

computed是依赖已有的变量来计算一个新变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制，依赖值不变的情况下其会直接读取缓存进行复用，computed不能进行异步操作

watch是监听某一个变量的变化，并执行相应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作

简单记就是：一般情况下computed是多对一，watch是一对多