·要模拟实现响应式数据,首先我们观察一下Vue实例的结构,分析要实现哪些属性与功能。

    整体分析 - 图1

    Vue

    ·目标:将数据注入到实例,便于方法内操作data

    Observer (发布者)

    ·目标:数据劫持,监听数据变化,并在变化时通知Dep

    Dep (消息中心)

    ·目标:存储订阅者以及管理消息的发送

    Watcher(订阅者)

    ·目标:订阅数据变化,进行视图更新

    · Compiler

    ·目标:解析模板中的指令与插值表达式,并替换成相应的数据