Vue 中 计算属性和监听

计算属性和监听

watch监听器 侦听器

概念

用来监听数据data或props的。
当被监听的值发生改变后会触发的方法。

定义

对数据进行监听

语法

简单类型数据

 watch: {
   value(newVal,oldVal){
     console.log('新值',newVal)
     console.log('旧值',oldVal)
   }
 }

对复合类型监听

// 对象
obj:{
  handler(val,oldVal){},
  deep:true,
  // 监听对象的某一个属性，用点语法
  'obj.prop'(val){}
}

// 数组
arr:{
  handler(val,oldVal){},
  deep:true,
  //深度监听
}

让watch自动执行一次

str:{
  handler(val){},
  immediate:true //是否立即执行
}
}

computed计算属性

• 对数据data或props 属性进行监听，并返回一个新值。
• 计算属性不受数据类型影响
• 计算属性的值必须使用，不然不会触发
• 初始化完成时就会自动执行一次

修改计算属性

computed:{
  value:{
    get(){
      return this.data
    }
    set(str){
      this.data=str
    }
  }
}

计算属性和监听属性

相同点

都是对数据或属性进行监听的，都可以在数据或属性被修改时做出响应

不同点

watch:

1. 受数据类型影响，如果监听的时数组或对象，需要开启深度监听
2. 可以执行异步

使用场景

点击按钮请求数据
点击几次按钮 按钮禁用

computed：

1. 对数据data或props 属性进行监听，并返回一个新值。
2. computed必须调用才执行
3. 有缓存
4. 不能执行异步
5. 不受数据类型影响，

使用场景

购物车加前后缀