vue中computed和watch的区别

一、总述

1. computer和watch都是vue监听数据变化的属性。

二、computed计算属性

1. computed本就是计算机的含义，就是用来计算的。

2. 如果函数所依赖的属性没有发生变化，从缓存中读取。

3. 必须有return返回。

4. 使用方法和data中的数据一样，可以做执行方法，对其进行传值接收进行处理。

三、watch监听属性

1. watch可以监听data中数据的值也可以监听computed计算属性的值，必须与数据的值一样。

2. watch有个handler函数接受两个参数新数据和旧数据。普通监听直接用数据名当函数接受参数。

3. watch函数不需要调用。

4. 只间听数据的值是否发生变化，不会监听的数据的地址是否发生变化，数据结构比较深的话需要深度监听设置deep:true。

5. 页面首次加载需要执行的话设置immediate:true。

四、区别

1. computed是计算属性，watch是监听一个值的变化而执行对应的回调。

2. computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调。

3. 是否调用return：computed必须有；watch可以没有

4. 使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框

5. 是否支持异步：computed函数不能有异步；watch可以