深度剖析Watch：详解用法和源码解读，探究与Computed的区别

2023-12-20 13:47:10

在Vue.js的世界中，Watch 和Computed 是两个至关重要的特性，它们赋予了组件以响应式能力，让数据与界面保持同步。本文将对Watch进行深入剖析，从其用法、底层实现源码到与Computed的区别，层层深入，为你揭示Watch的奥秘。

Watch：监视数据变化的利器

Watch允许你监视特定数据源的变化，并在变化发生时执行回调函数。其语法如下：

watch: {
  [property]: {
    handler: function (newValue, oldValue) {
      // 当property发生变化时执行的回调函数
    },
    deep: true // 是否进行深度观察
  }
}

Watch的用法

Watch可以用来监视任意数据源，无论是Vue实例的data属性、组件属性还是全局变量。在实际应用中，Watch常用于以下场景：

响应用户输入：例如，监视文本框中的值，在输入变化时更新组件状态。
监听外部数据的变化：例如，监视来自服务器的AJAX请求返回的数据，并根据变化更新界面。
检测数组或对象的变动：通过使用deep选项，你可以深入监视数组或对象的变动，包括嵌套属性的改变。

Watch底层实现源码解读

深入Watch的底层实现，我们可以进一步了解其工作原理。在Vue源码中，Watch是由Watcher类实现的。Watcher类定义了一个名为update的函数，该函数在数据源发生变化时被调用。update函数通过比较新的值和旧的值，判断是否需要执行回调函数。

update() {
  const currentValue = this.get();
  if (!this.shallow && this.value !== currentValue) {
    this.value = currentValue;
    this.run();
  }
}

其中，this.shallow表示是否进行浅层监视，this.value保存着上一次的值。如果新旧值不同，并且没有进行浅层监视，那么就会执行回调函数。

Watch与Computed：兄弟，却有区别

Watch和Computed同为响应式特性，但它们有着不同的目的和工作原理：

目的不同： Watch用于监视数据变化并执行回调，而Computed用于计算衍生数据。
工作原理不同： Watch直接监听数据源的变化，而Computed通过函数计算衍生数据，只有当依赖的数据发生变化时才会重新计算。

什么时候使用Watch，什么时候使用Computed？

通常情况下，如果你需要在数据变化时执行特定的动作，那么就应该使用Watch。如果需要根据其他数据计算衍生数据，那么就应该使用Computed。

实例：侦听输入框的变化

让我们通过一个实例来理解Watch的用法。考虑一个具有文本输入框的组件：

<template>
  <div>
    <input type="text" v-model="value">
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    };
  },
  watch: {
    value(newValue, oldValue) {
      console.log(`输入框值已从"${oldValue}"变为"${newValue}"`);
    }
  }
}
</script>