当前位置：首页 > VUE

vue里怎么实现监听

2026-02-23 11:37:01VUE

Vue 监听实现方法

使用 `watch` 选项

在 Vue 组件选项中定义 watch 对象，可以监听特定数据的变化。当被监听的数据发生变化时，会触发对应的处理函数。

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

使用 `$watch` 方法

在组件实例中调用 $watch 方法，可以动态添加监听器。这种方式适用于需要在运行时添加监听的情况。

export default {
  created() {
    this.$watch('message', (newVal, oldVal) => {
      console.log('Message changed from', oldVal, 'to', newVal)
    })
  }
}

监听对象属性

对于对象的属性变化，需要设置 deep 选项为 true 才能监听到嵌套属性的变化。

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

监听数组变化

Vue 可以监听到数组的变异方法（如 push、pop 等）引起的变化。如果需要监听数组元素的变化，也需要设置 deep 选项。

vue里怎么实现监听

export default {
  data() {
    return {
      items: [1, 2, 3]
    }
  },
  watch: {
    items: {
      handler(newVal) {
        console.log('Array changed', newVal)
      },
      deep: true
    }
  }
}

立即触发监听

设置 immediate 选项为 true 可以在监听器创建时立即触发回调。

export default {
  watch: {
    message: {
      handler(newVal) {
        console.log('Initial message:', newVal)
      },
      immediate: true
    }
  }
}

计算属性监听

计算属性本身具有缓存特性，只有当依赖的响应式属性变化时才会重新计算。可以替代简单的监听场景。

vue里怎么实现监听

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

生命周期钩子监听

在某些生命周期钩子中可以直接访问数据变化，例如 updated 钩子会在组件更新后触发。

export default {
  updated() {
    console.log('Component updated')
  }
}

事件总线监听

对于跨组件通信，可以使用事件总线模式来监听和触发自定义事件。

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

// Component A
EventBus.$on('custom-event', (data) => {
  console.log('Event received:', data)
})

// Component B
EventBus.$emit('custom-event', { message: 'Hello' })

Vuex 状态监听

当使用 Vuex 管理状态时，可以通过 watch 选项或 store.subscribe 方法来监听状态变化。

// 组件内监听
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  watch: {
    count(newVal) {
      console.log('Count changed:', newVal)
    }
  }
}

// 全局监听
store.subscribe((mutation, state) => {
  console.log('Mutation:', mutation.type)
  console.log('State:', state)
})

标签: vue