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