当前位置：首页 > 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 移动端签名实现方法在移动端实现签名功能，可以通过HTML5的Canvas结合触摸事件完成。以下是具体实现步骤：使用Canvas绘制签名安装vue-signature-pad插件或直接使…

vue实现选中单元格

Vue 实现选中单元格的方法基础实现思路在 Vue 中实现选中单元格功能，通常可以通过动态绑定 class 或 style 来实现。以下是一个基于表格的简单实现示例： <templ…

vue computed 实现

computed 的基本用法在 Vue 中，computed 用于声明计算属性，这些属性基于响应式依赖进行缓存。只有当依赖发生变化时，计算属性才会重新计算。 new Vue({ data: {…

vue功能实现

Vue 功能实现指南 Vue.js 是一个渐进式 JavaScript 框架，广泛用于构建用户界面。以下是 Vue 功能的常见实现方法。数据绑定 Vue 的核心功能之一是数据绑定，通过 v-mod…

vue 实现单选

使用 v-model 绑定单选值在 Vue 中，可以通过 v-model 绑定单选按钮的值。定义一个响应式数据（如 selectedOption），并将其与单选按钮的 value 属性关联。…

实现vue datepicker

安装依赖使用 vue-datepicker 或第三方库如 v-calendar 或 vue2-datepicker。以 vue2-datepicker 为例： npm install vue2…

vue监听实现