第一阶段：Vue 基础入门（第 10 天）

Vue 侦听器 watch：监听数据变化并执行自定义逻辑

Vue 的侦听器（watch）是一种强大的工具，用于监听 Vue 实例中数据的变化，并在变化时执行自定义的回调函数。这特别适合处理异步操作、副作用逻辑或需要在数据更新时触发特定行为的情况。下面我将逐步解释核心知识点、提供案例代码，并总结关键要点，确保内容真实可靠。

1. 侦听器的概念

侦听器允许你监控 Vue 实例中的特定数据属性（如变量 $data$ ）。当这些数据发生变化时，Vue 会自动调用你定义的回调函数。这与计算属性（computed）不同，侦听器更侧重于"响应变化并执行操作"，而不是计算新值。

2. 侦听器的定义

在 Vue 实例的 watch 选项中定义侦听器。语法如下：

javascript 复制代码

new Vue({
  data: {
    // 定义数据属性
    message: ''
  },
  watch: {
    // 侦听器定义：监听 message 的变化
    message(newValue, oldValue) {
      // 回调函数：当 message 变化时执行
      console.log(`数据从 ${oldValue} 变为 ${newValue}`);
    }
  }
});

这里，message 是被监听的属性，回调函数接收新值和旧值作为参数。

3. 基本侦听器

基本侦听器用于监听简单数据类型（如字符串、数字）。例如，监听一个输入框的内容变化，并实时显示输入内容的长度 $len$ 。

实现思路 ：定义一个数据属性（如 inputText），在侦听器中计算其长度 $len$ 。
代码示例：

vue 复制代码

<template>
  <div>
    <input v-model="inputText" placeholder="输入内容">
    <p>输入长度: {{ lengthDisplay }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      lengthDisplay: 0
    };
  },
  watch: {
    inputText(newVal) {
      // 当 inputText 变化时，更新长度显示
      this.lengthDisplay = newVal.length;
    }
  }
};
</script>

在这个例子中，inputText 被监听，每次变化时，回调函数计算新值的长度 $len$ 并更新 lengthDisplay。

4. 深度侦听器

当监听对象或数组时，默认只监听顶层属性的变化。如果需要监听内部属性（如嵌套对象），使用 deep: true 选项。

使用场景：例如，监听用户信息对象的变化，包括内部属性如姓名或年龄。
代码示例：

vue 复制代码

<template>
  <div>
    <input v-model="user.name" placeholder="姓名">
    <input v-model="user.age" placeholder="年龄">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        age: 0
      },
      message: ''
    };
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        // 当 user 的任何属性变化时执行
        this.message = `用户信息已更新: 姓名 ${newVal.name}, 年龄 ${newVal.age}`;
      },
      deep: true // 启用深度侦听
    }
  }
};
</script>

这里，deep: true 确保当 user.name 或 user.age 变化时，侦听器都会被触发。

5. 立即执行侦听器

使用 immediate: true 选项，可以让侦听器在 Vue 实例初始化时立即执行一次回调函数。

使用场景：例如，在组件加载时就需要执行一次初始化逻辑。
代码示例：

vue 复制代码

<template>
  <div>
    <p>计数器: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count: {
      handler(newVal) {
        console.log(`当前计数: ${newVal}`);
      },
      immediate: true // 初始化时立即执行一次
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

在这个例子中，immediate: true 使得在组件创建时，侦听器立即执行一次，输出初始值 $0$ 。

6. 案例代码演示

结合以上知识点，这里是一个综合案例：监听输入框内容长度 $len$ 和对象属性变化，使用深度侦听和立即执行。

vue 复制代码

<template>
  <div>
    <h3>案例 1: 输入框监听</h3>
    <input v-model="textInput" placeholder="输入文本">
    <p>文本长度: {{ textLength }}</p>

    <h3>案例 2: 对象属性监听</h3>
    <input v-model="userProfile.name" placeholder="姓名">
    <input v-model="userProfile.age" placeholder="年龄">
    <p>{{ profileMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textInput: '',
      textLength: 0,
      userProfile: {
        name: '',
        age: 0
      },
      profileMessage: '等待更新...'
    };
  },
  watch: {
    // 基本侦听器：监听文本输入，实时计算长度
    textInput(newVal) {
      this.textLength = newVal.length;
    },
    // 深度侦听器：监听用户对象，内部属性变化时提示
    userProfile: {
      handler(newVal) {
        this.profileMessage = `用户 ${newVal.name} 的年龄更新为 ${newVal.age}`;
      },
      deep: true,
      immediate: true // 初始化时立即执行一次
    }
  }
};
</script>

演示效果：输入框内容变化时，实时显示长度 $len$ ；用户信息变化时，立即提示更新。

7. 总结要点

掌握侦听器用法 ：侦听器通过 watch 选项定义，适合处理数据变化时的自定义逻辑。基本侦听器用于简单数据，深度侦听器（deep: true）用于对象或数组内部变化，立即执行侦听器（immediate: true）在初始化时运行。
与计算属性的区别：计算属性（computed）用于派生新值（如计算总和），而侦听器更适合异步操作或副作用（如 API 调用、日志记录）。选择依据：如果需要"响应变化并执行动作"，用侦听器；如果需要"基于依赖计算值"，用计算属性。
最佳实践：避免过度使用侦听器，因为它可能导致性能问题；优先使用计算属性，除非涉及复杂逻辑或异步任务。

通过以上步骤，你应该能熟练使用 Vue 侦听器来监听数据变化。如果有更多问题，欢迎继续提问！