vue为啥能实现监听
Vue 实现监听的原理
Vue 的监听机制基于 JavaScript 的 Object.defineProperty 或 ES6 的 Proxy（Vue 3 中采用）。通过劫持对象的属性访问和修改，Vue 能够在数据变化时触发更新。
数据劫持的核心
在 Vue 2 中，Object.defineProperty 被用于劫持对象的属性。通过定义属性的 getter 和 setter，Vue 能够追踪依赖并在数据变化时通知相关视图更新。
Object.defineProperty(obj, key, {
get() {
// 收集依赖
return value;
},
set(newVal) {
// 触发更新
value = newVal;
}
});依赖收集与派发更新
Vue 通过一个全局的 Dep 类管理依赖。每个被劫持的属性都会有一个对应的 Dep 实例，用于存储所有依赖该属性的 Watcher 实例。当数据变化时，Dep 会通知所有 Watcher 执行更新。
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}虚拟 DOM 与批量更新
Vue 通过虚拟 DOM 和异步更新队列优化性能。数据变化时，Vue 不会立即更新 DOM，而是将变更推入队列，在下一个事件循环中批量处理，避免不必要的重复渲染。
Vue 3 的 Proxy 优化
Vue 3 使用 Proxy 替代 Object.defineProperty，解决了 Vue 2 中无法监听数组和对象新增属性的问题。Proxy 可以直接监听整个对象，无需递归遍历属性，性能更高。
const observed = new Proxy(obj, {
get(target, key) {
// 收集依赖
return Reflect.get(target, key);
},
set(target, key, value) {
// 触发更新
return Reflect.set(target, key, value);
}
});响应式系统的优势
Vue 的响应式系统通过数据劫持和依赖追踪，实现了数据与视图的自动同步。开发者只需关注数据逻辑，无需手动操作 DOM，提高了开发效率和代码可维护性。
