一个极其简易版的vue.js实现

前言

之前项目中一直在用vue，也边做边学摸滚打爬了近一年。对一些基础原理性的东西有过了解，但是不深入，例如面试经常问的vue的响应式原理，可能大多数人都能答出来Object.defineProperty进行数据劫持，但是深入其实现细节，还是有很多之前没考虑到的东西，例如依赖收集后如何通知订阅器，以及订阅发布模式如何实现等等。过程中读了部分源码，受益匪浅，除此之外，动手去实现它也是个很棒的学习方式，话不多说，看代码，仓库地址。

实现

vue的更新机制我们简单概括一下就是，先对template进行解析，若检测到template中使用了data中定义的属性，则生成一个对应的watcher，通过劫持getter进行依赖（即watcher）收集，收集的内容保存在订阅器Dep，通过劫持setter做到改变属性从而通知订阅器更新，那么我们首先要做的就是对属性进行劫持。
vue2.0中使用的是Object.defineProperty，有传言说vue 3.0将会使用Proxy来代替Object.defineProperty，其有诸多好处：

defineProperty不能对数组进行劫持，因此vue的文档中才会提到只有push、pop等8种方法能够检测变化，而arr[index] = newValue并不能检测变化，push等方法能检测变化也是因为开发者对Array原生方法进行hack实现的。
defineProperty只能改变对象的某一个属性，若需要劫持整个对象，必须遍历对象，对每个属性劫持，因此效率并不高。而Proxy更像是一个代理，它会产生一个新的对象，该对象内部的属性均以实现劫持。但要注意，某个属性若也是一个对象类型，需要对该属性也执行proxy操作才能实现劫持。

Proxy目前来看唯一的缺点就是兼容性可能存在问题，不过无伤大雅，我们也顺应潮流，使用Proxy来实现数据劫持，代码很简单：

/**
 * 接受一个对象，对属性进行依赖追踪
 */
function observable(obj) {
  const dep = new Dep()
  
  const proxy = new Proxy(obj, {
    get(target, property) {
      const value = target[property]
      if (value && typeof value === 'object') { // 若属性为object，递归处理
        target[property] = observable(value)
      }
      if (Dep.target) { // Dep.target指向当前watcher
        dep.addWatcher(Dep.target)
      }
      return target[property]
    },
    set(target, property, value) {
      target[property] = value
      dep.notify() // 通知订阅器
    }
  })
  return proxy
}

注意该方法需要返回proxy实例，因为只有通过proxy实例访问属性才具有劫持效果。我们可以看到代码中有一个Dep，这个东西即是订阅器，可以理解为它维护了一个依赖（watcher）的数组，并实现了一些管理数据的方法诸如addWatcher添加依赖，以及需要提供一个notify方法来遍历所有的watcher执行其相应的更新函数，同样代码很简单：

/**
 * 依赖收集器，存放所有的watcher，并提供发布功能(notify)
 */
class Dep {
  constructor() {
    this.watchers = []
  }
  addWatcher(watcher) { // 添加watcher
    this.watchers.push(watcher)
  }
  notify() { // 通知方法，调用即依次遍历所有watcher执行更新
    this.watchers.forEach((watcher) => {
      watcher.update()
    })
  }
}

最后我们来看下watcher，我们知道watcher即我们所说的依赖，它是在编译template的时候，若找到data中声明的属性，即会生成一个对应的watcher实例，触发依赖收集，加入订阅器。同时还需要提供一个update函数，在触发notify的时候调用来更新视图，代码如下：

/**
 * watcher即所谓的依赖，监听具体的某个属性
 */
class Watcher {
  constructor(proxy, property, cb) {
    this.proxy = proxy
    this.property = property
    this.cb = cb
    this.value = this.get()
  }
  update() { // 执行更新
    const newValue = this.proxy[this.property]
    if (newValue !== this.value && this.cb) { // 对比property新旧值，决定是否更新
      this.cb(newValue)
    }
  }
  get() { // 只在初始化时调用，用于依赖收集
    Dep.target = this // 将自身指向Dep.target，执行完依赖收集再去释放
    const value = this.proxy[this.property]
    Dep.target = null
    return value
  }
}

至此，响应式原理大致已经成形，接着我们只要写一个简易的模板解析，demo就能跑起来啦。我这边的实现比较挫，仅仅是通过正则匹配来实现了一个不带diff的virture dom，纯属娱乐，重点还是在实现响应式原理上，这边贴一下代码：

let init = false // 只在初始化时去生成watcher
const eventMap = new Map() // 存放事件
const root = document.getElementById('root') // 根节点

/**
 * 用于将传入RayActive的vm对象进行代理，可通过this.xx访问this.data.xx
 * @param {Object} vm 
 * @param {Proxy} proxydata 经过proxy代理的vm.data对象，使this.xx操作也能触发视图更新
 */
function vmProxy(vm, proxydata) {
  return new Proxy(vm, {
    get(target, property) {
      return target.data[property] || target.methods[property]
    },
    set(target, property, value) {
      proxydata[property] = value
    }
  })
}

/**
 * 编译vm，分别对data和render做相应处理
 * @param {Object} vm 需要被编译的vm对象
 */
function compile(vm) {
  const proxydata = compileData(vm.data)
  compileRender(proxydata, vm.render)
  bindEvents(vm, vmProxy(vm, proxydata))
}

/**
 * 
 * @param {Object} data 需要被编译的vm中的data对象
 */
function compileData(data) {
  return observable(data)
}

/**
 * 
 * @param {*} render 需要被编译的render字符串
 * @param {*} proxydata 经proxy转换过的data
 */
function compileRender(proxydata, render) {
  if (render) {
    const variableRegexp = /\{\{(.*?)\}\}/g
    const variableResult = render.replace(variableRegexp, (a, b) => { // 替换变量为相应的data值
      if (!init) { // 只在初始化时去生成watcher
        new Watcher(proxydata, b, function() {
          compileRender(proxydata, render)
        })
      }
      return proxydata[b]
    })
    const eventRegexp = /(?<=<.*)@(.*)="(.*?)"(?=.*>)/
    const result = variableResult.replace(eventRegexp, (a, b, c) => { // 为绑定事件的标签添加唯一id标识
      const id = Math.random().toString(36).slice(2)
      eventMap.set(id, {
        type: b,
        method: c
      })
      return a + ` id=${id}`
    })
    init = true
    root.innerHTML = result
  }
}

/**
 * 通过root节点做事件代理，绑定模板中声明的事件
 * @param {*} vm 
 * @param {*} proxyvm 经过proxy代理的vm
 */
function bindEvents(vm, proxyvm) {
  for (let [key, value] of eventMap) {
    root.addEventListener(value.type, (e) => {
      const method = vm.methods[value.method]
      if (method && e.target.id === key) {
        method.apply(proxyvm) // 将vm中methods方法的this指向经过proxy的vm对象
      }
    })
  }
}

/**
 * 可理解为Vue中的Vue类，使用方式为new RayActive(vm)
 */
class RayActive {
  constructor(vm) {
    compile(vm)
  }
}

总结

这个简易实现仅仅是帮助大家学习vue的一些原理性的东西，跟vue比其他来只是冰山一角。这个代码还有很大的优化空间，比如执行notify时这里会通知所有的watcher等等，值得有空去研究一下。同时，我们能看到订阅发布模式带来的好处。如果不引入订阅器，那我们更新dom的代码得放到setter中去，那么就耦合了数据劫持与操作dom的逻辑。引入订阅器，能让我们在proxy中仅仅做依赖收集和通知的操作，剩下的各种复杂的或是个性化的逻辑可以放到watcher中去实现，完美做到了关注点分离。

一个极其简易版的vue.js实现

前言

实现

总结

猜你喜欢