vue为啥能实现监听
Vue 实现监听的核心机制
Vue 的监听能力主要基于其响应式系统，通过数据劫持和依赖收集实现。当数据变化时，相关视图会自动更新。
数据劫持与响应式原理
Vue 2.x 使用 Object.defineProperty 对数据对象的属性进行劫持。当访问或修改这些属性时，Vue 能够捕获这些操作并触发相应的更新。
// 简化版数据劫持示例
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(`读取 ${key}`);
return val;
},
set(newVal) {
console.log(`设置 ${key} 为 ${newVal}`);
val = newVal;
}
});
}依赖收集与发布订阅
每个响应式属性都维护一个依赖列表（Dep），当属性被访问时，当前正在计算的组件（Watcher）会被添加到依赖列表中。属性变化时，通知所有依赖进行更新。
// 简化版依赖收集
class Dep {
constructor() {
this.subscribers = [];
}
depend() {
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target);
}
}
notify() {
this.subscribers.forEach(sub => sub());
}
}Vue 3 的 Proxy 改进
Vue 3 改用 Proxy 实现响应式，解决了 Vue 2 的局限性（如数组检测、新增属性等问题）。Proxy 可以直接监听整个对象，无需递归遍历属性。
// Proxy 实现响应式
const reactive = (obj) => {
return new Proxy(obj, {
get(target, key) {
track(target, key);
return Reflect.get(target, key);
},
set(target, key, value) {
Reflect.set(target, key, value);
trigger(target, key);
return true;
}
});
};虚拟 DOM 与高效更新
响应式数据变化后，Vue 通过虚拟 DOM 进行差异比对（diff），仅更新必要的 DOM 节点。这种机制将直接操作 DOM 的开销降到最低。
生命周期与更新时机
Vue 的更新是异步的，通过 nextTick 机制批量处理数据变化。这避免了频繁的 DOM 操作，提升了性能。
