简单讲述Vue 2 响应式原理示例

Vue 2 响应式原理示例

这个示例展示了 Vue 2 中响应式系统的工作原理。下面将详细讲解代码中的各个部分，帮助理解 Vue 2 如何实现数据响应式。

1. 订阅者管理类 Dep

Dep 类用于管理依赖（订阅者），它包含以下几个关键部分：

• subscribers: 一个 Set 集合，用于存储唯一的订阅者（更新函数）。
• depend(): 添加当前的依赖到 subscribers 集合中。
• notify(): 通知所有订阅者调用其更新函数。

class Dep {
   
    constructor() {
   
        this.subscribers = new Set(); // 使用 Set 来存储订阅者，确保唯一性
    }

    // 添加订阅者
    depend() {
   
        if (Dep.target) {
   
            this.subscribers.add(Dep.target); // 将当前依赖（更新函数）添加到订阅者集合
            console.log(this.subscribers)
        }
    }

    // 通知所有订阅者更新
    notify() {
   
        this.subscribers.forEach(sub => sub());