Vue

Vue响应式原理模拟

1、数据驱动

（1）数据响应式

数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率

（2）双项绑定

数据改变，视图改变；视图概念，数据也随之改变

我们可以使用V-model在表单元素上创建双向数据绑定

（3）数据驱动是Vue最独特的特性之一

开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图

数据响应式的核心原理

（1）2.0

（2）3.0

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

1、发布订阅模式

Vue自定义事件API：$on注册事件，$emit触发事件

发布订阅模式核心：

（1）事件中心

（2）发布者

（3）订阅者

2、观察者模式

（1）发布者，又叫目标

记录所有的订阅者

发布通知

（2）订阅者，又叫观察者

总结：

观察者模式室友具体目标调度，比如当天事件触发，Dep就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的。

发布/订阅模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。

 

 Vue响应式原理模拟

整体结构

 

 Vue类

1、功能

（1）负责接收初始化的参数（选项）

（2）负责把data中的属性注入到Vue实例，转换成getter/setter

（3）负责调用observer监听data中所有属性的变化

（4）负责调用compiler解析指令/差值表达式

2、结构

 

Observer 数据劫持

1、功能

（1）负责把data选项中的属性转换成响应式数据

（2）data中的某个属性也是对象，把该属性转换成响应式数据

（3）数据变化发送通知

2、结构

 

 Compiler

1、功能

（1）负责编译模板，解析指令/差值表达式

（2）负责页面的首次渲染

（3）当数据变化后重新渲染

2、结构

 

 

3、使用

（1）编译模板，处理文本节点和元素节点

compile(el)

（2）编译元素节点，处理指令

compileElement(node)

（3）编译文本节点，处理差值表达式

compileText(node)

（4）判断元素属性是否是指令

isDirective(attrName)

（5）判断节点是否是文本节点

isTextNode(node)

（6）判断节点是否是元素节点

isElementNode(node)

watch

1、创建

（1）把watch对象记录到Dep类的静态属性target

（2）当数据发生变化的时候更新视图

双向绑定

数据渲染视图，视图改变数据改变

调试

1、调试页面首次渲染的过程

2、调试数据改变更新视图的过程

 总结

1、整体流程