Vue计算属性和监听属性

计算属性 computed

使用场景:当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性

计算属性 computed 是基于data中数据进行处理的,data数据变化,他也跟着变化

当data中数据没有发生改变时,我们调用computed中函数n次,只会进行缓存(执行一次)每个计算属性都包含两个set、get 属性

监听属性 watch

使用场景:数据变化时执行异步或开销较大的操作,可以随时修改状态的变化

watch:类似于监听机制+事件机制。

在大部分情况下我们都会使用computed,但如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择。watch为一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。


methods computed watch三者区别

  1. methods不存在缓存,执行一次运行一次,执行n次,运行n次
  2. computed有缓存,调用多次只会执行一次,不能执行异步任务
  3. watch能执行异步任务,computed能完成的,watch能完成,watch能完成的,computed不一定能完成

你可能感兴趣的