深入理解 Vue.js 的 `watch` 函数

在 Vue.js 中，响应式系统是其核心特性之一，通过它可以轻松地跟踪数据变化并自动更新视图。而 watch 函数则是 Vue 提供的一种用于监听和响应数据变化的高级方法。在这篇博客中，我们将深入探讨 watch 函数的使用方法、应用场景以及一些常见的陷阱。

什么是 watch 函数？

watch 函数是 Vue 实例上的一个方法，用于监听某个数据属性的变化，并在变化时执行特定的回调函数。与 computed 属性不同的是，watch 更适合处理数据变化时的副作用，例如异步操作或复杂的逻辑处理。

基本用法

让我们从一个简单的例子开始，了解 watch 函数的基本用法。

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    }
  }
});

在这个例子中，当 message 属性的值发生变化时，watch 函数会被触发，打印出新值和旧值。

传递回调函数

在 watch 中，可以直接传递一个回调函数来处理数据变化：

watch: {
  message: function (newVal, oldVal) {
    console.log(`Message changed from ${oldVal} to ${newVal}`);
  }
}

深度监听

有时候我们需要监听一个对象内部属性的变化，这时可以使用深度监听（deep watch）：

data: {
  user: {
    name: 'John',
    age: 30
  }
},
watch: {
  user: {
    handler(newVal, oldVal) {
      console.log(`User changed from ${JSON.stringify(oldVal)} to ${JSON.stringify(newVal)}`);
    },
    deep: true
  }
}

通过设置 deep: true，我们可以监听 user 对象内任意属性的变化。

即时执行

默认情况下，watch 函数只有在被监听的属性发生变化时才会触发。但是，有时候我们希望在组件创建时立即执行一次回调函数，可以通过设置 immediate: true 来实现：

watch: {
  message: {
    handler(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    },
    immediate: true
  }
}

监听数组

Vue 的 watch 函数也可以用于监听数组的变化。让我们来看一个例子：

<div id="app">
  <button @click="addItem">Add Item</button>
  <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: []
  },
  methods: {
    addItem() {
      this.items.push(`Item ${this.items.length + 1}`);
    }
  },
  watch: {
    items: {
      handler(newVal, oldVal) {
        console.log(`Items changed from ${JSON.stringify(oldVal)} to ${JSON.stringify(newVal)}`);
      },
      deep: true
    }
  }
});

在这个例子中，当我们添加新项目到 items 数组中时，watch 函数会被触发。

监听多个属性

如果需要监听多个属性，可以在 watch 中定义多个监听器：

data: {
  firstName: 'John',
  lastName: 'Doe'
},
watch: {
  firstName(newVal, oldVal) {
    console.log(`First name changed from ${oldVal} to ${newVal}`);
  },
  lastName(newVal, oldVal) {
    console.log(`Last name changed from ${oldVal} to ${newVal}`);
  }
}

监听计算属性

尽管计算属性通常是用于衍生数据的最佳选择，但在某些情况下，我们可能需要监听计算属性的变化：

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
},
watch: {
  fullName(newVal, oldVal) {
    console.log(`Full name changed from ${oldVal} to ${newVal}`);
  }
}

在这个例子中，我们监听 fullName 计算属性的变化，并在变化时执行回调函数。

实际应用场景

1. 异步数据请求

watch 函数常用于在某个数据变化时触发异步请求。例如，在搜索输入框中输入关键字时，发送请求获取搜索结果：

<div id="app">
  <input v-model="query" placeholder="Search...">
  <ul>
    <li v-for="result in results" :key="result.id">{{ result.name }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    query: '',
    results: []
  },
  watch: {
    query: {
      handler: 'fetchResults',
      immediate: true
    }
  },
  methods: {
    fetchResults() {
      if (this.query) {
        // 模拟异步请求
        setTimeout(() => {
          this.results = [
            { id: 1, name: `Result for "${this.query}"` }
          ];
        }, 500);
      } else {
        this.results = [];
      }
    }
  }
});

2. 表单验证

在表单验证中，watch 函数可以用于实时验证用户输入：

<div id="app">
  <input v-model="email" placeholder="Enter your email">
  <p v-if="error">{{ error }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    email: '',
    error: ''
  },
  watch: {
    email(newVal) {
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailPattern.test(newVal)) {
        this.error = 'Invalid email address';
      } else {
        this.error = '';
      }
    }
  }
});

3. 动态样式

使用 watch 函数可以根据数据变化动态修改样式：

<div id="app">
  <div :style="boxStyle"></div>
  <input type="range" v-model="size" min="50" max="200">
</div>

new Vue({
  el: '#app',
  data: {
    size: 100,
    boxStyle: {
      width: '100px',
      height: '100px',
      backgroundColor: 'red'
    }
  },
  watch: {
    size(newVal) {
      this.boxStyle.width = `${newVal}px`;
      this.boxStyle.height = `${newVal}px`;
    }
  }
});

常见陷阱

1. 性能问题

在使用 watch 函数时，如果监听的属性变化频繁，可能会导致性能问题。尤其是在深度监听时，每次变化都会触发回调函数，增加性能开销。解决方法是尽量避免不必要的深度监听，或对回调函数进行节流处理。

2. 缺少 immediate

有时候忘记设置 immediate: true 会导致一些初始化逻辑未能执行。例如在组件创建时未能立即发送请求。

3. 忘记清理

在使用 watch 函数时，如果涉及到异步操作（如请求或计时器），应确保在组件销毁时清理这些操作：

watch: {
  query: {
    handler: 'fetchResults',
    immediate: true
  }
},
methods: {
  fetchResults() {
    if (this.query) {
      this.cancelRequest(); // 清理之前的请求
      this.request = setTimeout(() => {
        // 发送新请求
        this.results = [
          { id: 1, name: `Result for "${this.query}"` }
        ];
      }, 500);
    } else {
      this.results = [];
    }
  },
  cancelRequest() {
    if (this.request) {
      clearTimeout(this.request);
      this.request = null;
    }
  }
},
beforeDestroy() {
  this.cancelRequest(); // 清理请求
}

总结

watch 函数是 Vue.js 提供的一个强大工具，用于响应数据变化并执行相应的回调。通过合理使用 watch 函数，我们可以实现异步数据请求、表单验证、动态样式等多种功能。在实际开发中，应注意性能问题，避免不必要的深度监听，并确保及时清理异步操作。希望这篇博客能够帮助你更好地理解和使用 Vue.js 的 watch 函数。