Vue 1.x & 2.x 的响应式

核心实现

Vue 1.x 和 2.x 的响应式系统主要基于 Object.defineProperty 实现，它通过以下几个核心概念来构建完整的响应式体系：

响应式数据劫持

• Object.defineProperty
  • ✨ getter：实现依赖收集机制
  • ✨ setter：触发更新通知机制

观察者模式

• Dep（Dependency）：作为发布者，管理所有依赖
• Watcher：作为观察者，接收变更通知

工作流程

当响应式数据发生变化时：

1. setter 被触发
2. Dep 通知所有相关的 watcher
3. watcher 执行更新函数

历史演进 🔄

Vue 的响应式系统经历了重要的演变过程，从 1.x 到 2.x 版本有了显著的改进：

Vue 1.x 的实现

📌 特点：

• 没有采用虚拟 DOM
• 每当模版中引用一个响应式数据时都会生成一个 watcher

✅ 优势：

• 可以精准的知道哪个数据发生了变化

❌ 缺点：

• 在应用复杂的时候，包含大量的组件，这种设计会导致一个组件有多个 watcher，非常消耗资源，导致性能的问题

Vue 2.0 的革新 🚀

在 2.0 版本的到了改进

✅ 优势：

• 引入了虚拟 DOM
• 将 watcher 的颗粒度放大到了组件级别

❌ 缺点：

1. 由于 Watcher 被放大到组件级别 ，只能识别出需要更新的组件，而无法直接定位组件内部具体哪个节点需要更新。 是依靠虚拟 DOM 的 diff 算法，对比新旧 DOM 树的差异，找出需要更新的具体节点

Vue 3.0 的革新 🚀

Vue 3.0 带来了全新的技术革新，主要体现在两个核心方面：

📦 响应式系统

• 基于 Proxy 的响应式实现

🔄 虚拟 DOM

• 快速 diff