Vue的computed与watch有什么区别?

javaScript

computed与watch都是为了简单的运算,减少在模板中写入过多的逻辑,那么我们什么时候用computed、什么时候用watch?

不同点

  • computed能同时监听多个属性变化并返回计算结果,而watch只能监听本身变化。
  • computed在组件初始化参与计算,而watch则不会。
  • watch监听到变化时能得到【新值、旧值】,computed则获取不到。
  • watch只能监听在props与data中定义的属性,而computed值不能与props、data相同,并且只有添加到template中才会参与计算。
  • computed无法进行异步计算(如: ajax、Promise、setTimeout),watch适用于异步。

总结

当你有一些数据依赖于其他数据而变动时候,使用computed更方便,监听中会涉及到异步操作或需要前后数据对比的只能用watch