computed和watch区别以及运用场景

computed和watch区别以及运用场景

computed：计算属性

•    支持缓存,只有依赖数据发生变化时，才会重新计算函数。
•    不支持异步操作
•    自动监听依赖值的变化，从而动态返回内容。

watch:侦听属性

• 不支持缓存，只要数据变化，就会执行侦听函数
• 支持异步操作
• 侦听属性的值可以是一个对象，接受handler回调，deep，immediate三个属性

  watch: {
              isHot: {
                  // 设置为true时会立刻执行以表达式的当前值触发回调
                  inmediate: true,

   handler接收两个参数（newVal：新值，oldVal：旧值

                  handler(newvalue, oldvalue) {
                      console.log('修改了', newvalue, oldvalue);
                  }，
   //deep设置为true时会监听对象内部值的变化
                 deep:true
              }
          } 

使用场景

 computed:多个数据进行相应操作影响一个，进行数值计算时利用其缓存的特性，避免每次获取值都重新计算。

watch:一个数据执行相应操作会影响多个数据，当需要在数据变化时候执行异步操作或者开销较大的操作时使用。