Vue.js DOM 属性变化监听：watch 和 $watch 方法详解

在 Vue.js 中，可以通过使用 `watch` 选项或 `$watch` 方法来监听 DOM 属性的变化。以下提供详细的示例和说明：

使用 `watch` 选项

以下示例演示如何使用 `watch` 选项来监听 `message` 属性的变化：

<template>
  <div>
    <input type="text" v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
    message(newVal) {
      console.log('message 属性的值发生变化：', newVal);
    }
  }
}
</script>

在这个示例中，我们使用 `v-model` 指令将输入框的值绑定到 `message` 属性上。然后，通过 `watch` 选项监听 `message` 属性的变化，并在变化时输出新的值。

使用 `$watch` 方法

除了使用 `watch` 选项，还可以使用 Vue 提供的 `$watch` 方法来监听 DOM 属性的变化。以下是一个示例：

<template>
  <div>
    <input type="text" ref="input" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$watch(() => this.$refs.input.value, (newVal) => {
      console.log('输入框的值发生变化：', newVal);
    });
  }
}
</script>

在这个示例中，我们使用 `$refs` 来引用输入框元素，并通过 `$watch` 方法监听输入框的值变化。当输入框的值发生变化时，回调函数会被触发，并输出新的值。

总结：`watch` 选项适用于监听数据属性的变化，而 `$watch` 方法则适用于监听 DOM 元素属性的变化。