当前位置：首页 > VUE

vue源码的具体实现

2026-02-23 20:31:22VUE

Vue 源码的核心实现

Vue 的源码实现主要围绕响应式系统、虚拟 DOM、模板编译和组件化展开。以下是关键部分的实现细节：

响应式系统

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据劫持。通过劫持数据的读取和修改操作，实现依赖收集和派发更新。

vue源码的具体实现

// Vue 2 的响应式实现
function defineReactive(obj, key, val) {
  const dep = new Dep()
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) {
        dep.depend()
      }
      return val
    },
    set(newVal) {
      if (newVal === val) return
      val = newVal
      dep.notify()
    }
  })
}

虚拟 DOM 与 Diff 算法

Vue 通过虚拟 DOM 描述真实 DOM，并使用 Diff 算法高效更新视图。核心是比较新旧虚拟节点的差异，最小化 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)
  }
}

模板编译

Vue 将模板编译为渲染函数，过程包括解析、优化和生成代码。

vue源码的具体实现

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

组件化

Vue 组件通过 Vue.extend 创建子类，每个组件实例拥有独立的响应式系统和生命周期。

const Sub = Vue.extend({
  template: '<div>{{message}}</div>',
  data() {
    return { message: 'Hello' }
  }
})

Vue 3 的改进

Vue 3 在源码层面进行了多项优化：

使用 Proxy 替代 Object.defineProperty，支持更多数据类型的响应式。
引入 Composition API，逻辑复用更灵活。
优化虚拟 DOM 的静态标记和树结构比对。
模块化设计，支持 Tree-shaking。

// Vue 3 的响应式实现
const reactive = (target) => {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key)
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver)
      trigger(target, key)
    }
  })
}