响应式原理简述

126 阅读1分钟

本节简述 Vue 的响应式原理

Vue响应式是通过观察者模式实现的,与之关联的三个类:Observer、Watcher、Dep

  • ObserverVue 中的将数据对象在转换为 Observer 类型对象,并绑定 __ob__ 属性且该属性不可遍历。
  • Watcher:将模板渲染和 Observer 对象结合在一起生成 Watcher 实例,Watcher 是观察者者。Watcher 的本质就是存储了一个需要在特定时机触发的函数。组件无论渲染多少次,组件的渲染 watcher 实例都是同一个,在初始化时确定的。
  • DepWatcherObserver 之间纽带。每一个 Observer 实例都有一个 dep 属性,用来存储观察者 Watcher。在数据响应式的时候,收集与数据相关的 watcher 实例,当数据变化的时候再派发更新。所以脱离了 watcher 也就没有实际意义。