vue监听实现

Vue 监听实现方法

使用 watch 选项

在 Vue 组件中，可以通过 watch 选项监听数据变化。当被监听的数据发生变化时，指定的回调函数会被触发。

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

立即执行的监听器

如果需要监听器在创建时立即执行一次，可以设置 immediate 选项为 true。

watch: {
  message: {
    handler(newVal, oldVal) {
      console.log('Message changed')
    },
    immediate: true
  }
}

深度监听对象

默认情况下，watch 只监听对象引用的变化。如果需要监听对象内部属性的变化，可以设置 deep 选项为 true。

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

使用 $watch 方法

除了在组件选项中定义监听器，还可以在组件实例上调用 $watch 方法来动态添加监听器。

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

计算属性监听

对于需要基于其他数据计算的值，可以使用计算属性。计算属性会自动追踪依赖，并在依赖变化时重新计算。

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

监听路由变化

在 Vue Router 中，可以通过 watch 来监听路由变化。

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

使用 .sync 修饰符

.sync 修饰符可以实现父子组件之间的双向绑定，本质上是监听 update: 事件。

// 父组件
<ChildComponent :title.sync="pageTitle" />

// 子组件
this.$emit('update:title', newTitle)

监听多个数据源

如果需要监听多个数据源的变化，可以使用数组形式的监听键。

watch: {
  ['data1', 'data2'](newValues, oldValues) {
    console.log('Data changed', newValues, oldValues)
  }
}

取消监听

通过 $watch 方法返回的函数可以取消监听。

const unwatch = this.$watch('message', handler)
unwatch() // 取消监听

以上方法涵盖了 Vue 中实现监听的常见场景，可以根据具体需求选择合适的方式。