vue里怎么实现监听

监听数据变化

在Vue中可以通过watch选项或$watch方法监听数据变化。watch允许观察某个数据属性，当其发生变化时执行指定的回调函数。

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`消息从 ${oldVal} 变为 ${newVal}`)
    }
  }
}

计算属性监听

使用计算属性可以监听依赖数据的变化并返回计算结果。计算属性具有缓存机制，只有当依赖数据变化时才会重新计算。

export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      return this.firstName + this.lastName
    }
  }
}

监听DOM事件

通过v-on指令或@简写可以监听DOM事件并执行相应的方法。

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击')
    }
  }
}
</script>

监听子组件事件

使用$emit触发自定义事件，父组件通过v-on监听子组件事件。

<!-- 子组件 -->
<button @click="$emit('custom-event', '数据')">触发事件</button>

<!-- 父组件 -->
<child-component @custom-event="handleCustomEvent"></child-component>

深度监听对象

对于对象或数组，需要设置deep: true选项才能监听到内部属性的变化。

export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 20
      }
    }
  },
  watch: {
    user: {
      handler(newVal) {
        console.log('用户信息变化', newVal)
      },
      deep: true
    }
  }
}

立即触发监听

设置immediate: true可以让监听器在创建时立即执行一次回调函数。

watch: {
  value: {
    handler(newVal) {
      console.log('初始值:', newVal)
    },
    immediate: true
  }
}

监听路由变化

通过watch监听$route对象可以响应路由变化。

watch: {
  '$route'(to, from) {
    console.log(`从 ${from.path} 跳转到 ${to.path}`)
  }
}

生命周期钩子监听

在生命周期钩子中监听特定事件或执行操作。

export default {
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      console.log('窗口大小改变')
    }
  }
}

使用第三方库监听

对于复杂场景，可以使用如Vuex的状态管理库或EventBus进行跨组件监听。

// EventBus示例
const bus = new Vue()

// 发送事件
bus.$emit('event-name', data)

// 接收事件
bus.$on('event-name', data => {
  console.log('收到事件', data)
})