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取消监听
