vue watch侦听器
时间: 2023-09-14 14:02:26 浏览: 59
Vue中的watch侦听器是一种在数据发生变化时执行一些操作的功能。它可以用来监听Vue实例中的数据变化,从而执行一些逻辑,比如更新DOM、发送请求等等。
watch的使用方式有两种:
1. 监听一个具体的数据属性
```javascript
watch: {
'name': function (newVal, oldVal) {
console.log(`name属性的值从${oldVal}变为${newVal}`);
}
}
```
2. 监听一个函数,返回需要侦听的数据属性
```javascript
watch: {
fullName: {
handler(newVal, oldVal) {
console.log(`fullName属性的值从${oldVal}变为${newVal}`);
},
// 返回需要侦听的数据属性
deep: true
}
}
```
在上面的例子中,我们使用了`deep: true`属性,它表示监听对象内部的属性变化,如果不加这个属性,只有对象本身发生变化才会触发watch。
另外,watch也可以监听数组内部的变化,包括push、pop、shift、unshift、splice、sort、reverse等方法。
```javascript
watch: {
list: {
handler(newVal, oldVal) {
console.log(`list属性的值从${oldVal}变为${newVal}`);
},
// 监听数组内部的变化
deep: true
}
}
```