Chapter 07 watch侦听器

news2025/11/1 2:11:07

欢迎大家订阅【Vue2+Vue3】入门到实践专栏，开启你的 Vue 学习之旅！

文章目录

前言
一、基本用法
二、深度侦听

前言

在 Vue 中，watch 侦听器是一个非常实用的工具，用于处理自定义数据的变化。本文详细讲解了 watch 侦听器的基本用法、深度侦听和常见应用场景。

一、基本用法

①定义
watch 侦听器用于观察 Vue 实例上的数据变更。当被观察的数据属性发生变化时，相应的回调函数会被触发，从而执行相应的业务逻辑。

②应用场景

异步请求：当数据变化时，可发起新的 API 请求。
表单处理：及时响应用户输入变化，进行表单验证或自动保存。
复杂数据结构处理：监控嵌套对象或数组的变化，执行相应的逻辑。

③基本语法
写法一：监测简单数据属性

watch:{
  数据属性名(newValue,oldValue){
    一些业务逻辑/异步操作
  }
}

【详解】

newValue：变化后的值。当被观察的 数据属性名 数据发生变化时，新的值会传递给这个 newValue 参数。
oldValue：变化前的值。当 数据属性名 的值改变时，可用这个参数来获取到变化之前的值。
回调函数体：在 {} 内部的内容是要执行的业务逻辑或异步操作。当 数据属性名 的值发生变化时，将会执行这个回调函数。

【示例】

watch:{
  count(newValue,oldValue){
    一些业务逻辑/异步操作
  }
}

写法二：监测对象属性

watch:{
  '对象.属性名'(newValue,oldValue){
    一些业务逻辑/异步操作
  }
}

【示例】

watch:{
  'user.name'(newValue,oldValue){
    一些业务逻辑/异步操作
  }
}

【示例】

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>watch侦听器</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <p>总数: {{ count }}</p>  
    <button @click="increment">加1</button>  
  </div>  

  <script>  
    new Vue({  
      el: '#app',  
      data() {  
        return {  
          count: 0 // 初始化 count  
        };  
      },  
      methods: {  
        increment() {  
          this.count += 1; // 增加 count 值  
        }  
      },  
      watch: {  
        count(newValue, oldValue) {  
          console.log(`Count changed from ${oldValue} to ${newValue}`);  
        }  
      }  
    });  
  </script>  
</body>  
</html>

运行结果：
在这里插入图片描述
点击“加1”按钮后，控制台输出“Count changed from 0 to 1”

二、深度侦听

如果需要监听一个对象或数组的内部变化，可以使用深度侦听。
基本语法：

watch:{
  数据属性名:{
    deep:true,   //深度监视（针对复杂类型）
    immediate:true,   //是否立刻执行一次handler
    handler(newValue){
      console.log(newValue)
    }
  }
}

deep：一个布尔值参数，如果设置为 true ，表示要对复杂类型（如对象或数组）进行深度监视，监视不仅限于对象或数组的引用变化，还监视其内部属性的变化。
immediate：一个布尔值参数，如果设置为 true，则在组件创建时立即执行一次回调函数（handler），可在数据初始化时就获取到当前的值，而不是等待数据改变时再执行。
handler(newValue)：监视器的回调函数，当被监视的变量发生变化时，执行此方法

【示例】

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>watch侦听器</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h2>User Information:</h2>  
    <p>姓名: {{ user.name }}</p>  
    <p>年龄: {{ user.age }}</p>  
    <button @click="updateUser">更新用户</button>    
  </div>  

  <script>  
    new Vue({  
      el: '#app',  
      data() {  
        return {  
          user: {  
            name: 'Alice',  
            age: 25  
          }  
        };  
      },  
      methods: {  
        updateUser() {  
          this.user.name = 'Bob'; // 更新用户名称  
          this.user.age += 1;     // 增加用户年龄  
        }  
      },  
      watch: {  
        user: {  
          deep: true, // 深度监视  
          handler(newValue) {  
            console.log('User data changed:', newValue);  
          }  
        }  
      }  
    });  
  </script>  
</body>  
</html>