vue 的 watch: 如何使用
时间: 2024-08-12 16:06:25 浏览: 31
Vue.js 的 `watch` 是一种监听视图属性变化并执行特定操作的功能。它可以在组件实例上创建自定义的观察者,当监视的目标(通常是数据)发生变化时,执行指定的回调函数。以下是 `watch` 的基本用法:
1. **简单监听**:
```javascript
data() {
return {
message: "Hello",
}
},
watch: {
message(newVal, oldVal) {
console.log(`Message updated from "${oldVal}" to "${newVal}"`);
}
},
// 当message属性改变时,会在控制台打印出新旧值
this.message = "World"; // 输出: Message updated from "Hello" to "World"
```
2. **深度监听**:
如果你想监听嵌套对象或数组的变化,可以设置第二个参数为 `true` 进行深度监听:
```javascript
watch: {
nestedObject: {
handler(newValue, oldValue) {
console.log('nestedObject changed');
},
deep: true,
},
}
```
3. **立即执行回调**:
`immediate` 参数可用于在首次创建时就执行一次回调:
```javascript
watch: {
someProp({ value }, { immediate }) {
if (immediate && value !== 'initial') {
console.log('Initial value detected!');
}
},
initial: 'initial',
immediate: true,
}
```
4. **函数形式的处理器**:
也可以传入一个函数作为处理器,该函数将接收两个参数:当前的新值和旧值:
```javascript
watch: {
age(age) {
console.log('Age is now:', age);
}
},
methods: {
updateAge(newAge) {
this.age = newAge;
}
},
mounted() {
this.updateAge(25); // 触发watcher
}
```
5. **取消监听**:
如果不再需要监听,可以使用 `unwatch` 方法取消:
```javascript
const watcher = this.$watch('someProperty', callback);
// ... later
this.unwatch(watcher); // 移除监听
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)