Vue响应式原理

Vue响应式原理

什么是Vue

什么是Vue？
一款用于构建用户界面的JavaScript框架，它基于标准 HTML,CSS和 JavaScript 构建，并提供一套声明式、组件化的编程模型，帮助你高效开发用户界面，无论是简单还是复杂的用户界面，Vue都可以胜任

数据驱动

• 数据响应式
  • 数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新的，避免了繁琐的DOM 操作，提高开发效率
• 双向绑定
  • 数据改变，视图改变；视图改变，数据也随之变化
  • 我们可以使用 v-model 在表单元素上创建双向数据绑定
• 数据驱动是Vue最独特的特性之一
  • 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图的

发布订阅模式和观察者模式

发布/订阅模式

• 发布/订阅模式
  • 订阅者
  • 发布者
  • 信号中心
    我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心“发布”（push）一个信号，其他任务可以向信号中心“订阅”（subscribe）这个信号，从而知道什么时候可以自己可以开始执行。这就叫“发布/订阅模式”（publish-subscribe pattern）

观察者模式

• 观察者（订阅者）—— Watcher
  • update(): 当事件发生时，具体要做的事情
• 目标（发布者）——Dep
  • subs数组：存储所有观察者
  • addSub：添加观察者
  • notify：当事件发生，调用所有观察者的update()方法
• 没有事件中心

总结

• 观察者模式是由具体目标调度，比如当事件触发，Dep就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的
• 发布/订阅模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在
  

Vue响应式原理模拟

• Vue基本结构

• 打印Vue实例观察

• 整体结构
  

• Vue

  • 把 data中的成员注入到Vue实例，并且把data中的成员转成 getter/setter

• Observer

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

Vue

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

Observer

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

Compiler

• 功能
  • 负责编译模板，解析指令/差值表达式
  • 负责页面的首次渲染
  • 当数据变化后重新渲染视图
• 结构

• 方法解释

  • compile(el)：编译模板，处理文本节点和元素节点
  • compileElement(node)：编译元素节点，处理指令
  • compileText(node)：编译文本节点，处理差值表达式
  • isDirective(attrName)：判断元素属性是否是指令
  • isTextNode(node)：判断节点是否是文本节点
  • isElementNode(node)：判断节点是否是元素节点

Dep

• 功能
  • 收集依赖，添加观察者（watcher）
  • 通知所有观察者
• 结构

• 方法解释
  • subs：存储所有观察者
  • addSub(sub)：添加观察者
  • notify()：发送通知

Watcher

• 功能
  • 当数据触发依赖，dep 所有的 Watcher 实例更新视图
  • 自身实例化的时候往dep对象添加自己
• 结构

• key：data 中的属性名称
• cb：回调函数负责更新视图
• update()：当数据发生变化的时候更新视图

调试 – 首次渲染

通过调试加深对代码的理解

• 调试页面首次渲染的过程
• 调试数据改变更新视图的过程

总结

• 问题
  • 给属性重新赋值成对象，是否是响应式的？
    • 答案：是响应式的。属性是已经存在于data中，当属性重新赋值会重新触发 set 方法，会执行walk方法，walk方法会重新遍历一次data对象的所有属性，设置成响应式的
  • 给Vue实例新增一个成员是否是响应式的？
    • 答案：不是响应式的。data的属性是在new vue（创建）时转换成响应式的，新增一个成员时，仅仅是给 vm 上增加了一个js属性而已。Vue官方文档的解释，给出了答案
• 通过下图回顾整体流程
  
• 创建了一个Vue对象，在Vue的构造函数首先记录下来 options传过来的选项，然后接着调用一个 proxyData 注入到Vue实例来，接着我们要创建一个 Observer和一个compiler,Observer的作用是数据劫持，我们要把Observer的data转换成 getter和setter，当数据发生变化的时候也就是触发set()方法的时候我们要去通知 Dep 我的数据变化了（通知变化），我要调用你的 notify() 方法,而 Dep 的 notify() 方法中又去调用 Watcher 的 update() 方法即是发送通知，通知watcher 我的数据变了你要去更新视图了，Watcher的 update() 方法要去更新视图，（这部分是当数据变化时更新视图），当我们创建 Watcher 对象时会把当前的 Watcher 对象添加到Dep的subs数组中（添加订阅者），让Dep收集这些依赖的Watcher,Dep把这些Watcher记录下来。Observer对象创建完之后要创建 Compiler 对象，Compiler 对象的作用是解析指令/解析差值表达式，在页面首次加载的时候会调用Compiler里面的相关方法去更新视图，同时Compiler里面还要去订阅数据的变化，绑定更新函数（这句话的意思是在Compiler中除了要更新视图外还要去创建一个 Watcher对象也就是订阅数据变化，当数据变化的时候Dep会通知Watcher，绑定更新函数是当我们创建一个Watcher 对象的时候要给它传递一个回调函数，在这个回调函数中更新视图）。当页面首次加载的时候是通过 Compiler更新视图，当数据变化的时候是通过Watcher更新视图，这是整体的流程