当前位置：首页 > VUE

js 实现vue模板

2026-01-12 00:30:58VUE

实现 Vue 模板的 JavaScript 方法

通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能，主要包括数据绑定、指令处理和模板解析。以下是核心实现思路：

数据绑定与响应式

使用 Object.defineProperty 或 Proxy 实现数据响应式：

function observe(data) {
  if (!data || typeof data !== 'object') return
  Object.keys(data).forEach(key => {
    let value = data[key]
    Object.defineProperty(data, key, {
      get() {
        return value
      },
      set(newVal) {
        if (newVal !== value) {
          value = newVal
          updateView() // 数据变化时更新视图
        }
      }
    })
    observe(value) // 递归处理嵌套对象
  })
}

模板解析

实现简单的模板插值功能：

function compile(template, data) {
  return template.replace(/\{\{(.*?)\}\}/g, (_, key) => {
    return data[key.trim()] || ''
  })
}

指令处理

基础指令实现示例（如 v-model）：

js 实现vue模板

function processDirectives(el, data) {
  if (el.hasAttribute('v-model')) {
    const key = el.getAttribute('v-model')
    el.value = data[key]
    el.addEventListener('input', (e) => {
      data[key] = e.target.value
    })
  }
}

完整示例

class MiniVue {
  constructor(options) {
    this.$el = document.querySelector(options.el)
    this.$data = options.data
    observe(this.$data)
    this.compile(this.$el)
  }

  compile(node) {
    Array.from(node.childNodes).forEach(child => {
      if (child.nodeType === 3) { // 文本节点
        this.compileText(child)
      } else if (child.nodeType === 1) { // 元素节点
        this.compileElement(child)
        if (child.childNodes.length) {
          this.compile(child)
        }
      }
    })
  }

  compileText(node) {
    const reg = /\{\{(.*?)\}\}/
    if (reg.test(node.nodeValue)) {
      const key = RegExp.$1.trim()
      node.nodeValue = this.$data[key]
    }
  }

  compileElement(node) {
    if (node.hasAttribute('v-model')) {
      const key = node.getAttribute('v-model')
      node.value = this.$data[key]
      node.addEventListener('input', () => {
        this.$data[key] = node.value
      })
    }
  }
}

使用方法

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

<script>
new MiniVue({
  el: '#app',
  data: {
    message: 'Hello MiniVue!'
  }
})
</script>