vue2.0 是如何实现响应式的？

Posted 2023-02-13 阿冰介

核心：Object.defineProperty 实现数据【响应式系统】

简述：类似于读者-书店-图书 的关系，读者通过书店提供的订阅信息找到图书，图书发生改变，书店也会触发监听给书店，让读者知道图书改变的信息

• 在 Vue 中模板编译过程中的指令或者数据绑定都会实例化一个 Watcher 实例，实例化过程中会触发 get() 将自身指向 Dep.target;

• data在 Observer 时执行 getter 会触发 dep.depend() 进行依赖收集;依赖收集的结果：1、data在 Observer 时闭包的dep实例的subs添加观察它的 Watcher 实例；2. Watcher 的deps中添加观察对象 Observer 时的闭包dep；

• 当data中被 Observer 的某个对象值变化后，触发subs中观察它的watcher执行 update() 方法，最后实际上是调用watcher的回调函数cb，进而更新视图。