当前位置：首页 > VUE

vue监听实现

2026-03-27 18:58:45VUE

Vue 监听实现方法

Vue 提供了多种监听数据变化的方式，以下是常见的实现方法：

watch 选项

在 Vue 组件选项中定义 watch 对象，可以监听特定数据的变化并执行回调函数。

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

$watch 方法

在组件实例中使用 $watch 方法进行动态监听，这种方式适合在需要时添加监听器。

vue监听实现

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

computed 计算属性

对于需要基于其他数据计算得出的值，使用计算属性可以自动跟踪依赖并更新。

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

深度监听对象

当需要监听对象内部属性的变化时，可以使用 deep 选项。

vue监听实现

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

立即触发监听

有时需要在初始化时立即执行监听回调，可以使用 immediate 选项。

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

监听路由变化

在 Vue Router 中，可以监听 $route 对象的变化来响应路由切换。

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

这些方法覆盖了 Vue 中大多数监听场景的需求，可以根据具体使用情况选择合适的方式。

标签: vue

分享给朋友：

vue实现视窗

Vue 实现视窗功能在 Vue 中实现视窗功能通常涉及监听浏览器窗口大小变化、响应式布局或创建自定义弹窗组件。以下是几种常见实现方式：监听浏览器窗口大小变化使用 Vue 的 mounted 和…

vue实现autocomplete

Vue 实现 Autocomplete 功能 Vue 中实现 Autocomplete（自动完成）功能可以通过自定义组件或使用现有库完成。以下是几种常见方法：方法一：使用 Vue 原生实现创建…

vue 实现视频

Vue 实现视频播放功能使用 Vue 实现视频播放功能可以通过 HTML5 的 <video> 标签或第三方库（如 video.js）来实现。以下是两种常见的方法：使用 HTML5…

vue实现pc

Vue 实现 PC 端应用开发 Vue.js 是一个流行的前端框架，适用于构建 PC 端 Web 应用。以下是关键步骤和最佳实践：项目初始化使用 Vue CLI 或 Vite 创建项目：…

vue 实现折叠

Vue 实现折叠功能的方法在 Vue 中实现折叠功能可以通过多种方式完成，以下是几种常见的实现方法：使用 v-if 或 v-show 控制显示隐藏通过绑定一个布尔值变量，结合 v-if 或 v…

vue实现画板

Vue 实现画板功能在 Vue 中实现画板功能可以通过 HTML5 的 Canvas API 实现。以下是一个完整的实现方案：创建 Vue 组件新建一个 Vue 单文件组件（SFC），命名为…

vue监听实现