当前位置：首页 > VUE

vue 通过监听实现

2026-01-18 03:02:30VUE

监听数据变化

Vue 中可以通过 watch 选项或 $watch 方法监听数据的变化。watch 允许对特定的数据属性设置回调函数，当数据变化时自动触发。

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

监听事件

Vue 组件可以通过 v-on 指令或 $on 方法监听自定义事件。子组件可以通过 $emit 触发事件，父组件监听并处理。

// Child Component
this.$emit('custom-event', payload)

// Parent Component
<child-component @custom-event="handleEvent" />

监听 DOM 事件

在模板中可以直接使用 v-on 监听原生 DOM 事件，如点击、输入等。

<button @click="handleClick">Click me</button>
<input @input="handleInput" />

深度监听对象

当需要监听对象或数组内部变化时，可以设置 deep: true 选项。这对于嵌套数据结构特别有用。

watch: {
  obj: {
    handler(newVal) {
      console.log('Object changed', newVal)
    },
    deep: true
  }
}

立即触发监听

设置 immediate: true 可以让监听回调在初始赋值时立即执行一次，而不必等待第一次变化。

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

监听路由变化

在 Vue Router 中可以通过 watch 监听 $route 对象的变化，响应路由参数或路径的改变。

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

计算属性监听

虽然计算属性本身是响应式的，但可以通过 watch 监听计算属性的变化，执行特定逻辑。

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
},
watch: {
  fullName(newVal) {
    console.log('Full name changed to', newVal)
  }
}

监听多个数据源

可以使用数组形式同时监听多个数据源，回调函数会接收对应顺序的新旧值数组。

watch: {
  ['a', 'b'](newVals, oldVals) {
    console.log('a changed from', oldVals[0], 'to', newVals[0])
    console.log('b changed from', oldVals[1], 'to', newVals[1])
  }
}

vue 通过监听实现