在
Vue2中，
watch属性用于监视数据的变化，当被监视的
属性变化时，回调函数会自动调用以进行相关操作。使用
watch属性需要注意，被监视的
属性必须存在于`data`或`computed`中 [^2]。
### 基本使用
可以监视`data`中的值，通过`
watch`
属性定义对某个
属性的监视。当
属性值发生改变时，`handler`函数会被调用，在这个函数里可以观察到旧值和新值的变化。还可以设置`immediate`为`true`，让`handler`在初始化时就调用一次。示例代码如下：
```
vue
<template>
<span>{{isHot ? '炎热':'寒冷'}}</span>
<button @click="onClick">切换天气</button>
</template>
<script>
export default {
data: {
isHot: true
},
methods: {
onClick() {
this.isHot = !this.isHot;
}
},
watch: {
isHot: {
immediate: true,
handler(newValue, oldValue) {
console.log('被调用了', newValue, oldValue);
}
}
}
};
</script>
```
###
监听对象
属性
####
监听对象部分
属性
可以直接
监听对象中的某个
属性，示例如下：
```javascript
new
Vue({
el: '#app',
data: {
user: {
firstName: 'John',
lastName: 'Doe'
}
},
watch: {
'user.firstName': {
handler: function(newVal, oldVal) {
console.log('First name changed:', newVal);
}
}
}
});
```
####
监听整个对象
Vue中的`
watch`默认不监测对象内部值的改变（一层），配置`deep: true`可以监测对象内部值的改变（多层）。示例如下：
```
vue
<div id="app">
<div>
<label for="a">A:</label>
<input v-model="myObject.a" id="a">
</div>
<div>
<label for="b">B:</label>
<input v-model="myObject.b" id="b">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/
vue@2"></script>
<script>
new
Vue({
el: '#app',
data: {
myObject: {
a: 1,
b: 2
}
},
watch: {
'myObject.a': function(newVal, oldVal) {
console.log('myObject.a changed:', newVal, oldVal);
},
'myObject.b': function(newVal, oldVal) {
console.log('myObject.b changed:', newVal, oldVal);
},
myObject: {
handler(newVal, oldVal) {
console.log('myObject changed:', newVal, oldVal);
},
deep: true
}
}
});
</script>
```
### 其他配置项
- **`handler`**：其值是一个回调函数，即
监听到变化时应该执行的函数 [^5]。
- **`deep`**：其值是`true`或`false`，确认是否深入
监听。一般
监听时不能
监听到对象
属性值的变化，设置为`true`可
监听对象
属性的改变（深度
监听） [^5]。
- **`immediate`**：其值是`true`或`false`，确认是否以当前的初始值执行`handler`函数。若为`true`，该回调将会在侦听开始之后被立即调用 [^5]。
示例代码如下：
```javascript
var vm = new
Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal);
},
b: 'someMethod',
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true
},
e: [
function handle1 (val, oldVal) { /* ... */ },
function handle2 (val, oldVal) { /* ... */ }
],
'e.f': function (val, oldVal) { /* ... */ }
}
});
```
扫一扫
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
