vue怎么实现数据监听

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 方法进行监听：

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

深度监听对象

对于对象或数组，需要设置 deep: true 进行深度监听：

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

立即触发监听

设置 immediate: true 可以在监听开始时立即执行回调：

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

计算属性监听

对于依赖多个值的变化，可以使用计算属性：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

使用 Vue.set 或 this.$set

对于动态添加的响应式属性，需要使用 Vue.set 方法：

this.$set(this.user, 'age', 25)

监听路由变化

可以通过 watch 监听 $route 对象的变化：

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

这些方法覆盖了 Vue 中数据监听的主要场景，可以根据具体需求选择合适的方式。