vue实现数据监听

Vue 数据监听实现方式

Vue 提供了多种方式实现数据监听，核心机制基于响应式系统。以下是常见方法：

响应式属性（data 和 computed） 在组件选项中定义 data 返回对象，Vue 会自动将其转为响应式：

data() {
  return {
    message: 'Hello Vue'
  }
}

计算属性 computed 会自动追踪依赖：

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

watch 选项 显式监听特定数据变化：

watch: {
  message(newVal, oldVal) {
    console.log('消息变化:', oldVal, '→', newVal)
  }
}

$watch API 动态创建监听器：

created() {
  this.$watch(
    () => this.user.id,
    (newId) => {
      console.log('ID 变化:', newId)
    }
  )
}

深度监听对象 添加 deep: true 监听嵌套属性：

watch: {
  user: {
    handler(newVal) {
      console.log('用户信息变化', newVal)
    },
    deep: true
  }
}

立即触发回调 配置 immediate: true：

watch: {
  value: {
    handler(val) {
      console.log('初始值:', val)
    },
    immediate: true
  }
}

原理说明

Vue 2.x 使用 Object.defineProperty 实现数据劫持，Vue 3.x 改用 Proxy。当数据变化时，会触发 setter 通知依赖更新，最终重新执行渲染函数或 watch 回调。

性能注意事项

• 避免过度使用深度监听（deep watch）
• 大数据量考虑手动控制监听粒度
• 必要时使用 unwatch 取消监听