watch与computed的故事

computed

1.是计算属性
2.应用：就是简化template里面{{}}计算和处理props或$emit的传值
3.具有缓存性

watch

1.是观察的动作
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性

computed计算属性

props: {
  province: String, // 省
  city: String, // 市
  area: String // 区
}，
computed: {
   address(){
     return `${this.province}${this.city}${this.area}`
   }
}

watch

 //正常使用
 props: {
    details：{
         type:Array
     }
 }，
//一般用法
 watch : {
     details: function(newV, oldV{
          console.log(newV);//变化之后的新数据
          console.log(oldV);//变化之前的旧数据
     }
  }
//深度监听
 watch:{
     details:{
          handler (newV, oldV) {
            // do something, 可使用this
               console.log(newV,oldV)
            },
          deep:true
       }
   },