当前位置：首页 > VUE

vue实现监听

2026-02-10 08:20:54VUE

Vue 监听实现方法

在 Vue 中，可以通过多种方式实现数据或事件的监听，以下是几种常见的方法：

使用 `watch` 选项

watch 是 Vue 提供的核心功能之一，用于监听数据的变化并执行相应的操作。

export default {
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    }
  }
}

使用 `$watch` 方法

可以通过 $watch 方法在组件实例中动态添加监听器。

export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    this.$watch('count', (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    });
  }
}

使用计算属性 `computed`

计算属性可以监听依赖数据的变化，并自动更新。

vue实现监听

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}

监听事件

可以通过 $on 方法监听自定义事件。

export default {
  methods: {
    handleEvent(data) {
      console.log('Event received:', data);
    }
  },
  mounted() {
    this.$on('custom-event', this.handleEvent);
  },
  beforeDestroy() {
    this.$off('custom-event', this.handleEvent);
  }
}

使用 `v-on` 指令监听 DOM 事件

在模板中可以直接使用 v-on 监听 DOM 事件。

<template>
  <button v-on:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
}
</script>

监听路由变化

在 Vue Router 中，可以通过 watch 监听路由变化。

vue实现监听

export default {
  watch: {
    '$route'(to, from) {
      console.log('Route changed from', from.path, 'to', to.path);
    }
  }
}

使用 Vuex 监听状态变化

在 Vuex 中，可以通过 watch 或 subscribe 监听状态变化。

export default {
  created() {
    this.$store.watch(
      (state) => state.user,
      (newVal, oldVal) => {
        console.log('User state changed:', newVal);
      }
    );
  }
}

监听子组件事件

父组件可以通过 v-on 监听子组件触发的事件。

<template>
  <child-component @custom-event="handleChildEvent" />
</template>

<script>
export default {
  methods: {
    handleChildEvent(data) {
      console.log('Child event received:', data);
    }
  }
}
</script>

监听第三方插件事件

对于第三方插件或库，可以通过其提供的事件监听机制实现监听。

export default {
  mounted() {
    const pluginInstance = new ThirdPartyPlugin();
    pluginInstance.on('event', this.handlePluginEvent);
  },
  methods: {
    handlePluginEvent(data) {
      console.log('Plugin event received:', data);
    }
  }
}

以上方法涵盖了 Vue 中常见的监听场景，可以根据具体需求选择合适的方式。

标签: vue