vue computed和watch有什么区别

Vue中的computed和watch都有监控数据变化的功能,但它们之间存在一些重要的区别。

  1. 计算属性(computed):主要用于简化模板中的复杂计算操作,它基于依赖进行缓存,只有当依赖数据发生变化时,才会重新计算。这意味着,只要依赖数据没有发生变化,多次访问计算属性时,因为使用了缓存,所以能直接复用之前的计算结果,不会重复执行计算函数,提升性能。此外,computed属性是同步的,不支持异步操作。
  2. 侦听属性(watch):它可以用来监听data中的数据变化。侦听属性主要适合在模板中不适合直接用prop或event进行传递的数据。与computed不同的是,watch不使用缓存,它始终需要调用回调函数处理。同时,它支持异步操作,这是computed所不能实现的。

综上,对于频繁访问且依赖值不会改变的情况,推荐使用computed;而对于数据变化处理较为复杂或者涉及异步的情况,则推荐使用watch。

computed:
1. computed是计算属性,也就是计算值,它更多⽤于计算值的场景
2. computed具有缓存性,computed的值在getter执⾏后是会缓存的,只有在它依赖的属性值改变之后,下⼀次获取computed的值时才会重
新调⽤对应的getter来计算
3. computed适⽤于计算⽐较消耗性能的计算场景
watch:
1. 更多的是「观察」的作⽤,类似于某些数据的监听回调,⽤于观察props$emit或者本组件的值,当数据变化时来执⾏回调进⾏后续操作
2. ⽆缓存性,页⾯重新渲染时值不变化也会执⾏
⼩结:
1. 当我们要进⾏数值计算,⽽且依赖于其他数据,那么把这个数据设计为computed
2. 如果你需要在某个数据变化时做⼀些事情,使⽤watch来观察这个数据变化

你可能感兴趣的:(vue.js,前端,javascript)