vue2中watch监听的使用及immediate、handler和deep属性解读

本文主要是介绍vue2中watch监听的使用及immediate、handler和deep属性解读，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、watch监听的三个属性

        1.handler：watch中监听到数据变化后需要具体执行的方法；

        2.immediate：使用watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性；

        3.deep：当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听，数组字符串一般不需要。

data（） {return {obj: {'name': "王",'age': 18},}
},
watch: {obj: {// 执行方法handler(newValue,oldVal) {console.log(oldValue)console.log(newValue)},deep: true, // 深度监听immediate: true  // 第一次改变就执行}，// 如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：'obj.name': {// 执行方法handler(newValue,oldVal) {console.log(oldValue)console.log(newValue)},deep: true, // 深度监听immediate: true  // 第一次改变就执行}
}

 二、常用的几种写法

1.通过watch监听msg数据的变化

watch: {msg(newValue, oldValue) {console.log(oldValue)console.log(newValue)}
}

2.通过watch监听obj 数据的变化。（深度监听 deep）

data（） {return {obj: {'name': "王",'age': 18},}
},
watch: {obj: {handler(newValue,oldVal) {console.log(oldValue)console.log(newValue)},deep: true  // 深度监听}
}

3.通过watch监听data数据的变化，数据发生变化时,执行 change 方法

watch: {data： 'change' // 值可以为methods的方法名
}，
methods: {change(newValue,oldVal){console.log(oldVal,newVal)}
}

这篇关于vue2中watch监听的使用及immediate、handler和deep属性解读的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---