js 实现vue模板
实现 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）：
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>实现要点
- 响应式系统：通过数据劫持监听属性变化
- 虚拟 DOM：可通过创建轻量级 DOM 结构提高性能
- 依赖收集：建立数据与视图的依赖关系
- 批量更新：使用异步队列避免频繁 DOM 操作
这种实现方式展示了 Vue 的核心原理，实际 Vue 的实现更为复杂，包含更多优化和功能。
