/simple-vue

Primary LanguageJavaScript

对于 Vue2.x 核心功能的简单实现

目前进度:

  • 数据侦测
  • Virtual DOM
  • DOM DIFF
  • 模板编译
  • 生命周期
  • 指令

总结

数据响应式

数据响应式的核心是Object.defineProperty，响应式系统涵盖三部分：

  • Observer
    • 接收一个对象，将对象的所有属性转为响应式，并为对象挂上一个 __ob__ 的属性，用来表示该对象是否已转为响应式
  • Dep
    • 依赖管理，实现收集依赖和触发依赖更新
  • Watcher
    • 对依赖层的抽象，如模板、watch对数据的依赖

对于数组的响应式，其核心依旧依靠的是Object.defineProperty，不过实现不相同，因为数组的变动是无法触发Object.defineProperty的setter，需要将改变数组本身的 7 个方法拦截，在其中向依赖发送消息。

Observer 会为每个引用类型的属性标记上__ob__，并把this保存在其中，它的作用主要是：

  • 标记数据是否是响应式，且保证同一个数据不会被重复侦测
  • 通过this.__ob__.dep获取依赖，数组需要依靠它向依赖发送通知

因为Object.defineProperty自身限制，无法对arr[0] = 1这类变动做出响应