数据代理(MVVM.JS)
1. 通过一个对象代理对另一个对象中属性的操作(读 / 写)
2. 通过 vm 对象来代理 data 对象中所有属性操作
3. 好处: 更方便的操作 data 中的数据
4. 基本实现流程
1 > 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应得属性描述符
2 > 所有添加的属性都包含 getter/setter
3 > 在 getter/setter 内部去操作 data 中对应的属性数据
模板解析 (compile.JS) 用来初始化显示
1. 模板解析的关键对象: compile.JS
2. 模板解析的基本流程
1 > 将 el 的所有子节点取出, 添加到一个新建的文档 fragment 中
2 > 对 fragment 中的所有层次子节点递归进行编译解析处理
对插值语法文本进行解析对元素节点的指令属性进行解析
事件指令解析一般指令解析
3 > 将解析后的 fragment 添加到 el 中显示
3. 解析大括号表达式文本节点 {{name}} textnode textContent = value
1 > 根据正则对象得到匹配出的表达式字符串: 子匹配 / RegExp.$1
2 > 从 data 中取出表达式对应的属性值
4. 事件指令解析
1 > 从指令名中取出事件名
2 > 根据指令的值从 methods 中得到对应的事件处理函数对象
3 > 给当前元素节点绑定指定事件名和回调函数的事件监听
4 > 指令解析完后, 移除此指令属性
5. 一般指令解析
1 > 得到指令名指令值
2 > 从 data 中根据表达式得到对应的值
3 > 根据指令名确定需要操作元素节点的什么属性
v-text textContent 属性
v-html innerHtml 属性
v-class className 属性
4 > 将得到的表达式的值设置到对应的属性上
5 > 移除元素的指令属性
来源: http://www.bubuko.com/infodetail-3342617.html