Vue原理 - Watch：深入浅出，深入理解内部工作原理

2023-11-08 08:52:53

Vue watch的概述

Vue watch允许您在数据发生变化时执行某些操作。您可以使用watch来更新DOM、触发事件或执行任何其他所需的逻辑。

要使用watch，您需要在Vue实例中定义一个watch对象。watch对象包含一个或多个属性，每个属性都对应一个要监视的数据属性。当被监视的数据属性发生变化时，watch对象中对应的属性就会触发。

例如，以下代码定义了一个watch对象，用于监视名为"count"的数据属性：

watch: {
  count: function (newVal, oldVal) {
    // 当count发生变化时执行此函数
  }
}

当"count"数据属性发生变化时，上面的函数就会被调用。函数的参数是新值和旧值。您可以使用这些参数来执行所需的逻辑。

深入了解watch的内部工作原理

为了深入理解watch的内部工作原理，我们需要了解Vue的响应式系统。Vue的响应式系统允许您在数据发生变化时自动更新DOM。

当您定义一个watch对象时，Vue会自动为被监视的数据属性添加一个getter和一个setter。getter会在您访问数据属性时被调用，setter会在您设置数据属性时被调用。

当您设置数据属性时，setter函数会触发watch对象中对应的属性。这就是为什么watch能够在数据发生变化时执行某些操作的原因。

watch的进阶用法

除了基本的使用方法外，watch还有一些进阶用法。

深度监视

默认情况下，watch只监视数据属性本身的变化。如果您想监视数据属性中的嵌套对象的变化，可以使用deep选项。

watch: {
  obj: {
    deep: true,
    handler: function (newVal, oldVal) {
      // 当obj或其嵌套对象发生变化时执行此函数
    }
  }
}

立即执行

默认情况下，watch只会在数据属性发生变化后执行。如果您想在Vue实例创建时立即执行watch，可以使用immediate选项。

watch: {
  count: {
    immediate: true,
    handler: function (newVal, oldVal) {
      // 当count发生变化时或Vue实例创建时执行此函数
    }
  }
}

自定义比较器

默认情况下，watch会使用严格相等比较来确定数据属性是否发生变化。如果您想使用自定义的比较器，可以使用compare选项。

watch: {
  count: {
    compare: function (newVal, oldVal) {
      // 返回true表示数据属性发生变化，返回false表示数据属性没有发生变化
    },
    handler: function (newVal, oldVal) {
      // 当count发生变化时执行此函数
    }
  }
}