当前位置：首页 > VUE

js实现vue模板

2026-01-19 16:51:12VUE

使用纯 JavaScript 实现 Vue 模板功能

要实现类似 Vue 的模板功能，可以通过以下步骤完成：

1. 数据绑定与响应式更新

通过 Object.defineProperty 或 Proxy 实现数据监听，当数据变化时自动更新 DOM。

function observe(data) {
  if (!data || typeof data !== 'object') return
  Object.keys(data).forEach(key => {
    let value = data[key]
    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get() {
        return value
      },
      set(newVal) {
        if (newVal !== value) {
          value = newVal
          updateView()
        }
      }
    })
    observe(value)
  })
}

2. 模板解析与编译

实现简单的模板解析，将 {{}} 语法替换为实际数据值。

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

3. 视图更新机制

当数据变化时重新渲染模板。

function updateView() {
  const app = document.getElementById('app')
  app.innerHTML = compile(template, data)
}

4. 完整实现示例

const data = {
  message: 'Hello World',
  user: {
    name: 'John'
  }
}

const template = `
  <div>
    <p>{{ message }}</p>
    <p>User: {{ user.name }}</p>
  </div>
`

// 初始化
observe(data)
updateView()

// 测试数据变化
setTimeout(() => {
  data.message = 'Updated Message'
}, 1000)

实现双向数据绑定

要实现类似 Vue 的 v-model 功能，可以扩展上述代码：

function handleModel(element, data, key) {
  element.value = data[key]
  element.addEventListener('input', (e) => {
    data[key] = e.target.value
  })
}

// 在编译阶段添加对 input 元素的处理
function compile(template, data) {
  const div = document.createElement('div')
  div.innerHTML = template

  const inputs = div.querySelectorAll('[v-model]')
  inputs.forEach(input => {
    const key = input.getAttribute('v-model')
    handleModel(input, data, key)
  })

  return div.innerHTML.replace(/\{\{(.*?)\}\}/g, (_, key) => {
    return key.split('.').reduce((obj, k) => obj[k.trim()], data) || ''
  })
}

实现简单指令系统

可以扩展支持更多类似 Vue 的指令：

function processDirectives(element, data) {
  if (element.hasAttribute('v-if')) {
    const key = element.getAttribute('v-if')
    if (!data[key]) {
      element.style.display = 'none'
    }
  }

  if (element.hasAttribute('v-for')) {
    const exp = element.getAttribute('v-for')
    const [item, arr] = exp.split(' in ')
    const items = data[arr.trim()]

    const parent = element.parentNode
    element.remove()

    items.forEach((it, index) => {
      const clone = element.cloneNode(true)
      clone.innerHTML = clone.innerHTML.replace(/\{\{(.*?)\}\}/g, (_, key) => {
        return key.trim() === item ? it : data[key.trim()]
      })
      parent.appendChild(clone)
    })
  }
}