当前位置：首页 > VUE

vue 通过监听实现

2026-03-10 08:45:22VUE

监听实现方式

在Vue中可以通过多种方式实现监听功能，包括watch选项、$watch方法以及计算属性（computed）。以下是具体实现方法：

使用`watch`选项

watch选项用于监听数据变化并执行相应操作。可以在Vue组件中直接定义watch对象来监听特定数据属性。

export default {
  data() {
    return {
      message: 'Hello',
      count: 0
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    },
    count: {
      handler(newVal, oldVal) {
        console.log(`Count changed from ${oldVal} to ${newVal}`);
      },
      immediate: true // 立即触发监听
    }
  }
}

使用`$watch`方法

$watch方法允许在组件实例中动态添加监听器。适用于需要在运行时动态监听数据的场景。

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

监听对象或数组的深层变化

默认情况下，watch不会监听对象或数组内部属性的变化。可以通过设置deep: true来启用深层监听。

export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 25
      }
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('User details changed');
      },
      deep: true
    }
  }
}

使用计算属性监听依赖变化

计算属性（computed）可以监听其依赖的数据变化，并在依赖变化时重新计算值。适用于需要根据其他数据动态计算的场景。

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  },
  watch: {
    fullName(newVal) {
      console.log(`Full name changed to ${newVal}`);
    }
  }
}

监听路由变化

在Vue Router中，可以通过watch监听$route对象来响应路由变化。

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

监听事件总线

通过事件总线（Event Bus）可以实现跨组件通信和监听。

// 创建事件总线
const eventBus = new Vue();

// 发送事件
eventBus.$emit('custom-event', data);

// 监听事件
eventBus.$on('custom-event', (data) => {
  console.log('Event received:', data);
});

监听Vuex状态变化

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

export default {
  computed: {
    ...mapState(['count'])
  },
  watch: {
    count(newVal) {
      console.log(`Count changed to ${newVal}`);
    }
  }
}

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

在模板中可以通过v-on指令（或@缩写）监听DOM事件。

vue 通过监听实现

<template>
  <button @click="handleClick">Click me</button>
</template>

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

以上方法涵盖了Vue中常见的监听实现方式，适用于不同场景下的数据变化和事件监听需求。

标签: vue