vue2的watch使用
时间: 2023-10-31 08:07:04 浏览: 49
在Vue2中,watch是一种用来观察和响应实例上数据变化的属性。通过添加一个watch属性到Vue实例中,开发者可以监视数据的变化并执行相应的操作。watch属性可以是一个对象,其中的属性名是要观察的数据对象或表达式,值是一个处理函数,用于在数据发生变化时执行相应的操作。
下面是一个示例代码,演示了Vue2中watch的使用方法:
```javascript
const vm = new Vue({
el: '#app',
data: {
info: {
username: '123'
}
},
watch: {
info: {
// 侦听器处理函数
handler(newVal) {
console.log(newVal)
},
// 使用deep开启深度监听,只要info对象中任何一个属性变化,都会触发‘对象的侦听器’
deep: true
}
}
})
```
在上述代码中,我们创建了一个Vue实例并将其挂载到`#app`元素上。在data属性中,我们定义了一个名为`info`的对象,其中包含一个`username`属性。在watch属性中,我们使用了对象的方式来监听`info`对象的变化。`handler`函数是侦听器处理函数,它会在`info`对象发生变化时被调用。而`deep: true`表示开启深度监听,即只要`info`对象中任何一个属性发生变化,都会触发该侦听器。
通过这种方式,我们可以方便地监视Vue实例中数据的变化,并在数据发生变化时执行相应的操作。