vue实现监听

监听数据变化

在Vue中，可以使用watch选项或$watch方法监听数据的变化。watch允许观察Vue实例上的数据变动，并在数据变化时执行回调函数。

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

计算属性监听

计算属性（computed）可以监听依赖数据的变化，并自动重新计算。计算属性是基于它们的响应式依赖进行缓存的，只有在相关依赖发生改变时才会重新求值。

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

监听DOM事件

使用v-on指令（或简写@）可以监听DOM事件，并在触发时执行方法。

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

methods: {
  handleClick() {
    console.log('Button clicked');
  }
}

监听子组件事件

通过$emit和v-on可以实现父子组件之间的通信。子组件触发事件，父组件监听并处理。

子组件：

this.$emit('custom-event', eventData);

父组件模板：

<child-component @custom-event="handleCustomEvent"></child-component>

监听路由变化

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

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

深度监听对象

对于对象或数组，需要使用深度监听（deep watch）来检测嵌套属性的变化。

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

立即触发监听

通过设置immediate: true可以在监听开始时立即执行回调函数。

watch: {
  value: {
    handler(newVal, oldVal) {
      console.log('Value changed');
    },
    immediate: true
  }
}