vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】

Vue.js 是一个流行的 JavaScript 框架，它有许多强大的特性，能够帮助我们更轻松地开发交互式前端应用。其中，VM.$watch 是 Vue.js 观察者模式的一个实现，可以用于监听数据的变化。在本文中，我们将探讨如何在 Vue.js 中使用 $watch 来监听数据变化，实现自定义键盘信息，同时提供两个示例说明。

什么是$watch

$watch 是 Vue.js 提供的一个方法，可以用于监听 data 中任意数据的变化（整个对象、值属性、数组等），一旦数据变化，就会触发指定的回调函数。$watch 本质上是实现了观察者模式，是 Vue.js 数据响应式的重要组成部分之一。

如何使用$watch

Vue.js 中的 $watch 可以在 Vue 实例、组件实例或 computed 属性中使用。其基本语法如下：

vm.$watch(expression, callback, options)

其中，vm 表示 Vue 实例或组件实例，expression 表示要监听的数据表达式，callback 表示数据变化时的回调函数，options 可以是一些选项，如 deep（深度监听）、immediate（是否立即运行回调函数）等。

下面是一个简单的示例，在组件中监听数据变化并输出：

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

<script>
export default {
  data() {
    return {
      myData: '',
    }
  },
  watch: {
    myData: function(newValue, oldValue) {
      console.log(`数据变化了，新的值为：${newValue}，旧的值为：${oldValue}`)
    }
  }
}
</script>

在上面的示例中，我们在组件中使用了 $watch，通过监听 myData 数据的变化，在控制台输出新旧值。在输入框中输入任意字符，都会触发数据变化。

示例一：实现自定义键盘信息

有时候我们需要在输入框中引入自定义的显示内容，例如在密码输入框中引入“密码强度”等信息。这时，我们可以使用 $watch 来实现自定义键盘信息。在下面的示例中，我们在输入框中引入了“按下 ‘s’ 键”的信息，并在数据变化时实时更新：

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

<script>
export default {
  data() {
    return {
      myData: '',
    }
  },
  watch: {
    myData: function(newValue, oldValue) {
      if (newValue.includes('s')) {
        newValue = `你按下了 's' 键，加油！`
      }
      this.myData = newValue
    }
  }
}
</script>

在上面的示例中，我们在 $watch 的回调函数中判断了新的值是否包含了字符 “s”，如果是，则将内容更新为“你按下了 ‘s’ 键，加油！”。

示例二：监听对象的属性变化

$watch 不仅可以监听简单数据类型的变化，还可以监听对象的属性变化。在下面的示例中，我们定义了一个对象，监听其属性的变化，并输出变化内容：

<template>
  <div>
    <p>{{ user.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '小明',
        age: 18
      }
    }
  },
  mounted() {
    this.$watch('user', this.handleUserChange, { deep: true })
  },
  methods: {
    handleUserChange(newValue, oldValue) {
      console.log(`用户信息变化，新信息为：${JSON.stringify(newValue)}，旧信息为：${JSON.stringify(oldValue)}`)
    }
  }
}
</script>

在上面的示例中，我们使用了 $watch 的 deep 选项来监听对象属性的深度变化，从输出结果中可以看到，我们在控制台输出了变化的对象属性信息。

总结

使用 $watch 监听 Vue.js 应用中的数据变化，可以帮助我们更加方便、灵活地开发运维前端应用。在本文中，我们讲解了 $watch 的基本语法和两个应用示例，其中一个示例演示了如何实现自定义键盘信息，另一个示例演示了如何监听对象的属性变化。