Vue核心实现源码

Vue 核心实现源码解析

Vue.js 的核心实现主要包括响应式系统、虚拟 DOM、模板编译和组件化机制。以下是关键部分的源码解析：

响应式系统

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据劫持。核心代码在 src/core/observer 目录：

// Vue 2 的响应式实现
class Observer {
  constructor(value) {
    this.value = value
    this.dep = new Dep()
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

  walk(obj) {
    Object.keys(obj).forEach(key => {
      defineReactive(obj, key)
    })
  }
}

虚拟 DOM 实现

虚拟 DOM 相关代码位于 src/core/vdom。VNode 类表示虚拟节点：

class VNode {
  constructor(tag, data, children, text, elm) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
  }
}

模板编译

模板编译流程在 src/compiler 目录，将模板转换为渲染函数：

function compileToFunctions(template) {
  const ast = parse(template.trim())
  optimize(ast)
  const code = generate(ast)
  return new Function(code.render)
}

组件系统

组件初始化代码在 src/core/instance/init.js：

export function initMixin(Vue) {
  Vue.prototype._init = function(options) {
    const vm = this
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    )
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm)
    initState(vm)
    initProvide(vm)
    callHook(vm, 'created')
  }
}

依赖收集

Dep 和 Watcher 实现响应式依赖关系：

class Dep {
  constructor() {
    this.subs = []
  }

  addSub(sub) {
    this.subs.push(sub)
  }

  notify() {
    this.subs.forEach(sub => sub.update())
  }
}

class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm
    this.getter = parsePath(expOrFn)
    this.cb = cb
    this.value = this.get()
  }

  get() {
    Dep.target = this
    const value = this.getter.call(this.vm, this.vm)
    Dep.target = null
    return value
  }
}

生命周期钩子

生命周期管理在 src/core/instance/lifecycle.js：

export function mountComponent(vm, el) {
  vm.$el = el
  callHook(vm, 'beforeMount')

  const updateComponent = () => {
    vm._update(vm._render())
  }

  new Watcher(vm, updateComponent, noop)

  callHook(vm, 'mounted')
}

异步更新队列

异步更新实现位于 src/core/observer/scheduler.js：

const queue = []
let waiting = false

function flushSchedulerQueue() {
  queue.sort((a, b) => a.id - b.id)
  for (let i = 0; i < queue.length; i++) {
    queue[i].run()
  }
  queue.length = 0
  waiting = false
}

function queueWatcher(watcher) {
  queue.push(watcher)
  if (!waiting) {
    waiting = true
    nextTick(flushSchedulerQueue)
  }
}

这些核心实现共同构成了 Vue 的响应式、组件化和渲染系统。源码结构清晰，各模块职责分明，通过观察者模式实现数据驱动视图的更新机制。