当前位置：首页 > VUE

原生实现vue功能

2026-01-08 05:12:41VUE

原生JavaScript实现Vue核心功能

使用原生JavaScript模拟Vue的核心功能需要理解响应式数据绑定、虚拟DOM和组件系统等概念。以下是关键实现方法：

响应式数据系统

通过Object.defineProperty或Proxy实现数据劫持，当数据变化时自动更新视图：

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

  observe(data) {
    if (!data || typeof data !== 'object') return
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key])
    })
  }

  defineReactive(obj, key, val) {
    const dep = new Dep()
    this.observe(val)
    Object.defineProperty(obj, key, {
      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())
  }
}

模板编译系统

实现简单的模板解析和指令处理：

class Compiler {
  constructor(el, vm) {
    this.$vm = vm
    this.$el = document.querySelector(el)
    this.compile(this.$el)
  }

  compile(el) {
    const childNodes = el.childNodes
    Array.from(childNodes).forEach(node => {
      if (this.isElement(node)) {
        this.compileElement(node)
      } else if (this.isInterpolation(node)) {
        this.compileText(node)
      }

      if (node.childNodes && node.childNodes.length > 0) {
        this.compile(node)
      }
    })
  }

  isElement(node) {
    return node.nodeType === 1
  }

  isInterpolation(node) {
    return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)
  }

  compileElement(node) {
    const attrs = node.attributes
    Array.from(attrs).forEach(attr => {
      const attrName = attr.name
      const exp = attr.value
      if (this.isDirective(attrName)) {
        const dir = attrName.substring(2)
        this[dir] && this[dir](node, exp)
      }
    })
  }

  compileText(node) {
    this.update(node, RegExp.$1, 'text')
  }

  update(node, exp, dir) {
    const updater = this[dir + 'Updater']
    updater && updater(node, this.$vm[exp])
    new Watcher(this.$vm, exp, function(value) {
      updater && updater(node, value)
    })
  }

  textUpdater(node, value) {
    node.textContent = value
  }
}

观察者模式实现

连接响应式数据和视图更新的桥梁：

class Watcher {
  constructor(vm, key, cb) {
    this.$vm = vm
    this.key = key
    this.cb = cb

    Dep.target = this
    this.$vm[this.key]
    Dep.target = null
  }

  update() {
    this.cb.call(this.$vm, this.$vm[this.key])
  }
}

主类整合功能

将各模块组合成完整系统：

class Vue {
  constructor(options) {
    this.$options = options
    this.$data = options.data

    new Observer(this.$data)
    this.proxyData(this.$data)
    new Compiler(options.el, this)
  }

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

使用示例

创建Vue实例并观察响应式效果：

<div id="app">
  <p>{{message}}</p>
  <button v-on:click="changeMessage">Change</button>
</div>

<script>
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  },
  methods: {
    changeMessage() {
      this.message = 'Changed!'
    }
  }
})
</script>