关于vue.js:vue中watch高级用法deep和immediate

一、handler办法和immdiate属性

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

如果想立刻执行怎么办？

watch:{    name:{       handler(newName,oldName){           //执行代码       },       immediate:true //true就示意会立刻执行     } }

二、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设置监听函数。