Vue 2 中 watch 监控的详细介绍

目录

Vue 2 中 watch 监控的详细介绍

watch 简介

基本语法

使用场景与示例

示例 1：基础用法

示例 2：深度监听对象属性

示例 3：立即执行 watcher

高级用法

异步操作与防抖/节流

使用 Lodash 实现防抖

组合多个属性

示例：监听多个属性

---

Vue 2 中 watch 监控的详细介绍

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，它提供了多种机制来响应数据的变化。在 Vue 2 中，watch 是一个特别有用的选项，它允许你监听特定的数据属性，并在这些属性发生变化时执行自定义逻辑。本文将详细介绍 Vue 2 中 watch 的用法、工作原理以及一些最佳实践，并通过具体的代码示例帮助你更好地掌握这一功能。

watch 简介

watch 选项用于定义一个或多个观察者（watcher），它们会监视指定的数据属性的变化。当被监视的属性发生变化时，相应的处理函数会被调用，从而允许你对变化做出反应。这在需要根据数据变化执行异步操作或开销较大的计算时非常有用。

基本语法

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  watch: {
    // 定义一个 watcher 来监视 message 属性
    message(newVal, oldVal) {
      console.log(`message changed from ${oldVal} to ${newVal}`);
    }
  }
};

在这个例子中，每当 message 的值发生变化时，watch 选项中的处理函数就会被触发，并接收新旧两个值作为参数。

使用场景与示例

示例 1：基础用法

假设我们有一个简单的输入框，希望在用户输入内容后立即更新某个状态：

<template>
  <div id="app">
    <input v-model="searchText" placeholder="Search...">
    <p>Searching for: {
  { searchText }}</p>
  </div>
</template>

<script>