vue系列【watch的使用方法及immdiate、deep解决组件传值中数据改变视图不更新等常见问题】

摘要：在vue页面中 组件之间的传值 务必会使用watch方法监听传过来的值，根据值得变化做相应的逻辑变化，但是使用watch 会遇到 数据改变，视图不更新的问题、数据不发生变化 无法触发watch里边的逻辑等两个常见的问题

解决方案：watch中的immdiate和deep两个属性就能解决以上问题

一、handler方法和immdiate属性

watch默认绑定，页面首次加载时，是不会执行的。只有值发生改变才会执行。

如果想立即执行怎么办？

1 watch:{
2     name:{
3       handler(newName,oldName){
4           //执行代码
5       },
6       immediate:true //true就表示会立即执行
7     }
8 }

二、deep属性

如果是监听的是对象类型，当手动修改对象的某个属性时，发现是无效的。

这时候就需要deep属性。

data:{
    obj:{
      a:1
    }
},
watch:{
    obj:{
      handler(newName,oldName){
          //执行代码
      },
      deep:true //为true，表示深度监听，这时候就能监测到a值变化
    }
}

deep为true，就可以监测到对象中每个属性的变化。

它会一层层遍历，给这个对象的所有属性都加上这个监听器。但是这样性能开销会比较大，修改任何一个属性，都会出发这个监听器里的handler.

三、deep优化

可以使用字符串形式监听

data:{
    obj:{
      a:1
    }
},
watch:{
    'obj.a':{
      handler(newName,oldName){
          //执行代码
      },
      deep:true //为true，表示深度监听，这时候就能监测到a值变化
    }
}

这样vue就会一层层解析，知道遇到属性a，然后才给a设置监听函数。