vue侦听器：彻底搞懂，彻底掌握！

前端

2023-04-12 22:12:20

侦听器：Vue 中的数据变化监听机制

Vue 侦听器是用于监听数据变化的强大机制，当数据发生变化时，它会触发侦听器，从而执行相应的操作。在本文中，我们将深入探究 Vue 侦听器的用法、作用、常见问题和最佳实践。

侦听器的作用

侦听器在 Vue 中有着广泛的应用场景，它可以帮助我们实现以下任务：

监听数据变化： 当组件中的数据发生变化时，侦听器可以触发函数，从而更新组件的 UI、更新状态或执行其他操作。
监听生命周期事件： 侦听器可以监听组件生命周期中的关键事件，如创建、挂载、更新和卸载。这使我们能够在组件的不同阶段执行特定的逻辑。
监听自定义事件： Vue 允许我们创建和触发自定义事件，侦听器可以用来响应这些事件，从而实现组件之间的通信。

侦听器类型

Vue 提供了两种主要类型的侦听器：

watch： watch 侦听器用于监听特定的数据变化，它可以接受两个参数：被监听的数据和一个处理函数。当被监听的数据发生变化时，处理函数将被调用，执行相应的操作。
watchEffect： watchEffect 侦听器与 watch 侦听器类似，但它会在组件每次更新时执行处理函数，无论数据是否发生变化。这对于监听依赖于组件其他状态的数据非常有用。

代码示例

让我们通过一个代码示例来了解 watch 侦听器的用法：

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

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from "${oldValue}" to "${newValue}".`);
    }
  }
}
</script>