Bootstrap

deep原理 vue的watch_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设置监听函数。

;