vue中computed和watch的区别

在一样的情况下，computed的性能会高于watch，所以大部分情况使用computed会更好。

但是，它们也有各自的优缺点：

computed计算属性：

1. 能够实时监听data里面绑定的数据（包括vueX），但是其余数据的改变是监听不到的。

2. 适用于需要计算的一个值被多个数据影响的情况，如果函数内所依赖的属性没有发生改变，就从缓存中读取，只有依赖数据发生改变，才会重新进行计算。

3. 必须有return返回值，函数名由自己取。

4. 其中有异步操作时无效。

watch监听器：

1. 其中的函数名必须与data中的被监听数据名一致。

2. 其中有两个参数，代表了新数据和旧数据，一般使用（val，oldVal）。

3. 不写deep: true时，代表不需要进行深度监听，其只会监听数据的值是否发生改变，而不去监听数据的地址是否发生改变。要想监听数据地址就必须采取深度监听。

4. immediate: true，该属性让页面首次加载时做一次监听。

区别：

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

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

3. computed必须有return返回，watch可以没有。

4. computed函数不能有异步，但是watch可以。

使用场景：

当一个值的变化引发多个属性的变化或改变后需要采取一些操作时使用watch；

当多个值影响一个值的变化时使用computed。