vue实现的关键点

  1. Observer类,该类是用于监控数据的变化,核心函数Object.defineProperty
  2. Directive类,该类是用于DOM节点与数据进行一一对应
  3. Binding类,该类是用于快速定位指令与各类数据的关系,通过对象键值对的特质避免循环搜索
  4. Watcher类,该类用于在DOM中的数据发生变化,执行相应的update函数,更新DOM

实现过程

  1. 保存实例参数
  2. 把公共指令和用户参数做合并,公共指令中存储着不同类型节点的update函数
  3. 初始化数据监听模块,即Observer类
    3.1 遍历数据对象,如果值类型为对象或数组则继续深度遍历,并且记录父节点(记录父节点是为了模拟事件冒泡)否则定义监听函数。
    3.2 监听函数通过Object.defineProperty可以监听数据的变化并且调用函数,该函数的功能是调用订阅事件并且逐级冒泡调用父级订阅事件。
  4. 初始化Bingding对象,该对象保存在vue实例的属性rootBingding中,设置订阅事件
  5. 挂载元素
    5.1 遍历DOM元素的每个节点。当遍历到文本节点时,创建一个新的文本节点,把应该显示的数据填上,删除旧的文本节点。如果文本节点中含有指令,创建Directive实例,保存节点和数据。
    5.2 在创建Directive类过程中创建Watcher类(该类保存上下文、更新回调函数等),并且调用公共指令中的update函数。
    5.3 Watcher类实例化过程中根据路径创建Binding对象,并把该对象放入到rootBingding中,格式与用户传入进来的data格式一致,在该Binding对象中存放watcher实例。这样当指令更新时,利用Binding的对象特性可以快速定位到相应的watcher类,调用watcher类中的更新函数,实现DOM节点的部分更新。

代码

https://github.com/youngwind/...

本文固定链接: http://www.js-code.com/vue-js/vue-js_25772.html