零、Vue源码手敲

一、简单源码

/**
 * 虎摸理解的：
 * 1、有key属性 a、b； 对应 Dep-a 、 Dep-b
 * 2、变量a被使用3处 Dep-a 管理 3个 watcher; 变量b被使用2处，Dep-b 管理 2个 watcher
 * 3、a变化，Dep-a notify📢广播所有的 wather-a; b变化同理。
 * 
 * 订阅-发布模式（观察者模式）实际应用：
 * 
 * 4、所以defineReactive 多少个 key 就有多少个 Dep实例。dep在定义观察属性时创建
 * 5、而知道多少处使用某个key,只能是是在编译compile时。watcher在 compile时 初始化update创建
 * 6、具体的 watcher push 进入 响应的 dep 队列。建立《订阅》 是在 Object.defineProperty的get方法见《关键点》
 * 
 * 7、关键点：解释：在创建 new Watcher()使用 主动访问属性 this[xxx] 调用执行一次get方法；触发了 appDep
 * 8、关键点：然后：Dep.target = null； 又主动释放了，非 new Watch() 的 get 访问 不进入 addDep。 (妙啊！)
 * 9、每次 编译一次 key(a), new Watcher()一次，然后调用 get() appDep一次到 队列。然后再主动释放。（妙啊！）
 */


// 数据响应式
function defineReactive(obj, key, val) {
  // 递归
  observe(val);

  // 创建Dep实例 和 key 一一对应(dep：形成一个闭包)
  const dep = new Dep()

  Object.defineProperty(obj, key, {
    get() {
      console.log("get", key);
      // 依赖收集 （关键点2）
      Dep.target && dep.addDep(Dep.target)
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log("set", key);
        // 保证如果newVal是对象，再次做响应式处理
        observe(newVal);
        val = newVal;

        dep.notify()
      }
    },
  });
}

// 遍历obj，对其所有属性做响应式
function observe(obj) {
  if (typeof obj !== "object" || obj === null) {
    return;
  }

  new Observer(obj);
}

// 根据传入value的类型做相应的响应式处理
class Observer {
  constructor(value) {
    this.value = value;

    if (Array.isArray(value)) {
      // todo
    } else {
      this.walk(value);
    }
  }

  // 对象响应式
  walk(obj) {
    Object.keys(obj).forEach((key) => {
      defineReactive(obj, key, obj[key]);
    });
  }
}

function proxy(vm) {
  Object.keys(vm.$data).forEach(key => {
    Object.defineProperty(vm, key, {
      get() {
        return vm.$data[key]
      },
      set(v) {
        vm.$data[key] = v
      }
    })
  })
}

// KVue
// 1.对data选项做响应式处理
// 2.编译模板
class KVue {
  constructor(options) {
    this.$options = options;
    this.$data = options.data;

    // data响应式处理
    observe(this.$data);

    // 代理
    proxy(this)

    // compile
    new Compile(options.el, this)
  }
}

// 解析模板
// 1.处理插值
// 2.处理指令和事件
// 3.以上两者初始化和更新
class Compile {
  constructor(el, vm) {
    this.$vm = vm
    this.$el = document.querySelector(el)

    if (this.$el) {
      this.compile(this.$el)
    }
  }

  compile(el) {
    // 遍历el子节点，判断他们类型做相应的处理
    const childNodes = el.childNodes

    childNodes.forEach(node => {
      if (node.nodeType === 1) {
        // 元素
        // console.log('元素', node.nodeName);
        // 处理指令和事件
        const attrs = node.attributes
        Array.from(attrs).forEach(attr => {
          // k-xxx="abc"
          const attrName = attr.name
          const exp = attr.value
          if (attrName.startsWith('k-')) {
            const dir = attrName.substring(2)
            this[dir] && this[dir](node, exp)
          }
        })
      } else if (this.isInter(node)) {
        // 文本
        // console.log('插值', node.textContent);
        this.compileText(node)
      }

      // 递归
      if (node.childNodes) {
        this.compile(node)
      }
    })
  }

  update(node, exp, dir) {
    // 1.初始化
    const fn = this[dir + 'Updater']
    fn && fn(node, this.$vm[exp])

    // 2.更新
    new Watcher(this.$vm, exp, function (val) {
      fn && fn(node, val)
    })
  }

  // k-text
  text(node, exp) {
    this.update(node, exp, 'text')
  }

  textUpdater(node, value) {
    node.textContent = value
  }

  // 编译文本 {{xxx}}
  compileText(node) {
    console.log(RegExp.$1, '---->$1');
    this.update(node, RegExp.$1, 'text')
  }

  html(node, exp) {
    this.update(node, exp, 'html')
  }

  htmlUpdater(node, value) {
    node.innerHTML = value
  }

  // 是否插值表达式
  isInter(node) {
    return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)
  }
}

// 监听器： 负责依赖更新
class Watcher {
  constructor(vm, key, updateFn) {
    this.vm = vm
    this.key = key
    this.updateFn = updateFn

    // 触发依赖收集（关键点1）
    Dep.target = this
    this.vm[this.key]
    Dep.target = null
  }

  // 未来被Dep调用
  update() {
    // 执行实际更新操作
    this.updateFn.call(this.vm, this.vm[this.key])
  }
}
// 观察者模式
class Dep {
  // 队列
  constructor() {
    this.deps = []
  }
  // 添加订阅
  addDep(watcher) {
    this.deps.push(watcher)
  }
  // 发布-📢广播
  notify() {
    this.deps.forEach(watcher => watcher.update())
  }
}

二、画图

三、Dep 和 Watcher

有兴趣的可以理解一下；简易版的数据响应式！