Vue原理分析总结

vue源码分析总结

MVVM框架基本实现原理

• 数据代理
• 模板解析
• 数据绑定

相关函数:

1. 将伪数组转为真数组: [].slice.call(arr)
2. node.nodeType: 得到结点类型(document, element, attribute, text)
3. Object.defineProperty(obj, propertyName, props): 给对象添加属性
4. Object.keys(obj): 得到对象自身可枚举属性组成的数组 (IE8不支持)
5. obj.hasOwnProperty(prop): 判断prop是否是obj的自身属性
6. DocumentFragment: 文档碎片(高效批量更新多个结点) 内存中保存n个element的容器对象

数据代理:

1. 通过一个对象代理另一个对象来操作此对象的数据
2. Vue数据代理: 通过vm对象来代理data对象中所有属性的操作(get/set)
3. 用到的是准备中的3和4特性

模板解析(编译):

基本流程:

1. 将el的所有子结点取出, 添加到一个新建的文档fragment对象中
2. 对fragment中所有层次的子结点再内存中递归进行编译解析处理
3. 将解析处理后的元素塞回页面
4. 用到特性6和1

大括号表达式解析

1. 根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1
2. 从data中取出表达式对应的属性值
3. 将属性值设置为文本结点的textContent

事件指令解析:

1. 从指令中取出事件名
2. 根据指令的值从methods中得到对应的事件处理函数对象
3. 给当前结点绑定指定事件名和回调函数的dom事件监听
4. 指令解析完后,移除指令属性

一般指令解析:

1. 得到指令名和智力高表达式
2. 从data中根据表达式得到对应的值
3. 根据指令名确定需要操作元素结点的什么属性
4. 将得到的表达式的值设置到对应的属性上
5. 移除元素的指令属性

数据绑定:

1. 利用数据劫持来实现数据绑定的效果.
2. 通过defineProperty()来监视data中所有属性(任意层次,递归实现)数据的变化,一旦变化Dep就发出通知更新界面
3. 用到3和4特性

observe(data, this)

1. 被观察者必须是一个对象
2. 实现数据劫持
3. 遍历所有数据,创建Dep
4. 给data重新定义属性,添加set/get方法
5. 建立Dep和Wacter之间关系
6. 监听新值变化,Dep发出订阅通知,遍历所有相关wacter进行更新
7. wacter调用回调函数更新界面

wacter(data)和Dep

1. compile编译解析表达式期间创建wacter监视,每一个表达式就对应一个监视器
2. Dep: 初始化时给data的属性进行数据劫持时创建,与data中的属性一一对应
3. Dep和wacter之间的关系是多对多

双向数据绑定:

1. 双向数据绑定是建立在单项数据绑定的基础之上
2. 在解析v-model指令时,给当前元素添加input的监听
3. 当input等value值发生变化时,将最新的值赋值给当前表达式所对应的data属性,从而更新页面

MVVM关系视图