watch和computed的区别及两者的使用场景

区别

watch

  1. watch是监听一个值的变化,然后执行对应的回调;
  2. watch中的函数不需要调用;
  3. watch有两个参数;
    immediate:组件加载立即触发回调函数执行,
    deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变
  4. watch中的函数名称必须要和data中的属性名一致,watch依赖于data中的属性,data中的属性发生变化的时候,watch中的函数就会发生变化。
  5. watch不支持缓存;

computed

  1. computed是计算属性,通过属性计算得来的属性。
  2. computed中的函数直接调用,不用()。
  3. computed中的函数必须用return返回。
  4. computed是依赖data中的属性,data中属性发生改变的时候,当前函数才会执行,data中属性没有改变的时候,当前函数不会执行。
  5. computed中不能对data中的属性进行赋值操作,如果对data中的属性进行赋值,data中的属性发生变化,从而触发computed中的函数,就会形成死循环。
  6. computed属性的结果会被缓存,除非依赖的属性发生变化才会重新计算。

使用场景

  • watch的使用场景:一个数据影响多个数据,需要在数据变化时执行异步操作或者开销较大的操作时使用。
    例如:搜索数据
  • computed:一个数据受多个数据影响,处理复杂的逻辑或多个属性影响一个属性的变化时使用。
    例如:购物车商品结算的时候

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