当前位置：首页 > VUE

实现简易vue

2026-03-27 11:19:18VUE

以下是一个简易Vue实现的示例代码和核心原理说明，分为响应式系统、虚拟DOM和模板编译三部分：

响应式系统实现

使用Object.defineProperty实现数据劫持：

实现简易vue

class Observer {
  constructor(data) {
    this.walk(data)
  }

  walk(data) {
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key])
    })
  }

  defineReactive(obj, key, val) {
    const dep = new Dep()
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        Dep.target && dep.addSub(Dep.target)
        return val
      },
      set(newVal) {
        if (newVal === val) return
        val = newVal
        dep.notify()
      }
    })
  }
}

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

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

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

虚拟DOM与渲染

实现基础的虚拟DOM diff算法：

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

function patch(oldVnode, vnode) {
  if (!oldVnode) {
    createElm(vnode)
  } else {
    const isRealElement = oldVnode.nodeType
    if (isRealElement) {
      const parent = oldVnode.parentNode
      const el = createElm(vnode)
      parent.insertBefore(el, oldVnode.nextSibling)
      parent.removeChild(oldVnode)
      return el
    } else {
      // Diff算法简化实现
      if (oldVnode.tag !== vnode.tag) {
        oldVnode.el.parentNode.replaceChild(createElm(vnode), oldVnode.el)
      } else {
        const el = vnode.el = oldVnode.el
        if (typeof vnode.children === 'string') {
          el.textContent = vnode.children
        } else {
          updateChildren(el, oldVnode.children, vnode.children)
        }
      }
    }
  }
}

模板编译

实现简单的模板编译器：

实现简易vue

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

function parse(template) {
  // 简化的AST解析
  const stack = []
  let root, currentParent

  parseHTML(template, {
    start(tag, attrs) {
      const element = { tag, attrs, children: [] }
      if (!root) {
        root = element
      } else {
        currentParent.children.push(element)
      }
      stack.push(element)
      currentParent = element
    },
    end() {
      stack.pop()
      currentParent = stack[stack.length - 1]
    },
    chars(text) {
      currentParent.children.push({ text })
    }
  })

  return root
}

主框架结构

组合各模块形成完整框架：

class Vue {
  constructor(options) {
    this.$options = options
    this._data = options.data
    new Observer(this._data)
    this._proxyData()
    this.$compile = new Compile(options.el, this)
  }

  _proxyData() {
    Object.keys(this._data).forEach(key => {
      Object.defineProperty(this, key, {
        get() {
          return this._data[key]
        },
        set(newVal) {
          this._data[key] = newVal
        }
      })
    })
  }
}

这个实现包含了Vue的核心功能：