模拟Vue.js响应式原理

整体分析

• Vue基本结构
• 打印Vue实例观察
• 整体结构
  

Vue

把data中的成员注入到Vue实例，并且把data中的成员转成gettter、setter

• 功能
  • 负责结构初始化的参数（选项）
  • 负责把data中的属性注入到Vue实例，转化成getter、setter
  • 负责调用observer监听data中的所有属性的变化
  • 负责调用compiler解析指令、插值表达式
• 结构
  • $options
  • $el
  • $data
  • _proxyData()

Observer

能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知Dep

• 功能
  • 负责把data选项中的属性转换成响应式数据
  • data中的某个属性也是对象，把该属性转化成响应式数据
  • 数据变化发送通知
• 结构
  • walk(data)
  • defineReactive(data, key, value)

Compiler

• 功能
  • 负责编译模板，解析指令、差值表达式
  • 负责页面的首次渲染
  • 当数据变化后重新渲染视图
• 结构
  • el
  • vm
  • compile(el)
  • compileElement(node)
  • compileText(node)
  • isDirective(attrName)
  • isTextNode(node)
  • isElementNode(node)

Dep(Dependency)

• 功能
  • 收集依赖，添加观察者（watcher）
  • 通知所有观察者
• 结构
  • subs
  • addSub(sub)
  • notify()

Watcher

• 功能
  • 当数据变化触发依赖，dep通知所有的Watcher实例更新视图
  • 自身实例化的时候往dep对象中添加自己
• 结构
  • vm
  • key
  • cb
  • oldValue
  • update()

总结

• 问题

  • 给属性重新赋值成对象，是否是响应式的？是

  • 给Vue实例新增一个成员是否是响应式的？不是

    对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property

• 通过下图回顾整体流程