当前位置：首页 > VUE

vue2.0源码实现

2026-01-19 23:31:23VUE

Vue 2.0 核心源码实现解析

Vue 2.0 的源码设计围绕响应式系统、虚拟 DOM 和组件化展开。以下是其核心模块的实现要点：

响应式系统

通过 Object.defineProperty 实现数据劫持，核心代码逻辑如下：

function defineReactive(obj, key) {
  let value = obj[key]
  const dep = new Dep() // 依赖收集器
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) {
        dep.depend() // 收集依赖
      }
      return value
    },
    set(newVal) {
      if (newVal === value) return
      value = newVal
      dep.notify() // 触发更新
    }
  })
}

虚拟 DOM 实现

_render 方法将模板编译为虚拟 DOM：

vue2.0源码实现

Vue.prototype._render = function() {
  const vm = this
  const { render } = vm.$options
  return render.call(vm, vm.$createElement)
}

patch 算法完成 DOM 差异更新：

function patch(oldVnode, vnode) {
  if (sameVnode(oldVnode, vnode)) {
    patchVnode(oldVnode, vnode)
  } else {
    const parent = oldVnode.parentNode
    createElm(vnode)
    parent.insertBefore(vnode.elm, oldVnode)
    parent.removeChild(oldVnode)
  }
}

组件化系统

组件实例化流程：

vue2.0源码实现

function createComponent(Ctor, data, context, children) {
  const vnode = new VNode(
    `vue-component-${Ctor.cid}`,
    data, undefined, undefined, undefined, context,
    { Ctor, children }
  )
  return vnode
}

生命周期管理

通过调用钩子函数实现生命周期管理：

function callHook(vm, hook) {
  const handlers = vm.$options[hook]
  if (handlers) {
    handlers.forEach(handler => handler.call(vm))
  }
}

模板编译

将模板转换为渲染函数：

function compile(template) {
  const ast = parse(template)
  optimize(ast)
  const code = generate(ast)
  return new Function(`with(this){return ${code}}`)
}

依赖收集系统

Watcher 与 Dep 的联动实现：

class Dep {
  constructor() {
    this.subs = []
  }
  depend() {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }
  notify() {
    this.subs.forEach(watcher => watcher.update())
  }
}