100行代码实现vue
实现简易Vue框架的100行代码示例
以下是一个简化版Vue响应式系统的核心实现，包含数据响应式、模板编译和依赖收集等基本功能。
class Dep {
constructor() {
this.subscribers = new Set()
}
depend() {
if (activeEffect) this.subscribers.add(activeEffect)
}
notify() {
this.subscribers.forEach(effect => effect())
}
}
let activeEffect = null
function watchEffect(effect) {
activeEffect = effect
effect()
activeEffect = null
}
function reactive(raw) {
Object.keys(raw).forEach(key => {
const dep = new Dep()
let value = raw[key]
Object.defineProperty(raw, key, {
get() {
dep.depend()
return value
},
set(newValue) {
value = newValue
dep.notify()
}
})
})
return raw
}
function compile(template, data) {
return template.replace(/\{\{(.*?)\}\}/g, (_, key) => {
return data[key.trim()]
})
}
class MiniVue {
constructor(options) {
this.$data = reactive(options.data())
this.$el = document.querySelector(options.el)
this.$template = this.$el.innerHTML
watchEffect(() => {
const rendered = compile(this.$template, this.$data)
this.$el.innerHTML = rendered
})
}
}
// 使用示例
const app = new MiniVue({
el: '#app',
data() {
return {
message: 'Hello Mini Vue!',
count: 0
}
}
})
setInterval(() => {
app.$data.count++
}, 1000)核心功能解析
响应式系统
- 通过
reactive函数将普通对象转换为响应式对象 - 使用
Object.defineProperty实现属性拦截 Dep类管理依赖关系，实现观察者模式
依赖收集
watchEffect函数注册副作用函数- 在属性访问时通过
depend方法收集依赖 - 属性变更时通过
notify方法触发更新
模板编译
- 简单实现双大括号插值语法
{{}} - 通过正则表达式匹配模板中的动态内容
- 将数据绑定到对应位置实现渲染
使用方法
-
创建HTML模板
<div id="app"> <p>{{ message }}</p> <p>Count: {{ count }}</p> </div> -
初始化MiniVue实例
const app = new MiniVue({ el: '#app', data() { return { message: 'Hello World', count: 0 } } }) -
修改数据自动更新视图
app.$data.message = 'Updated' // 视图自动刷新
扩展建议
- 添加虚拟DOM实现提高性能
- 支持事件绑定和指令系统
- 实现组件化系统
- 添加计算属性和侦听器功能
这个实现省略了生产环境需要的很多特性，但展示了Vue最核心的响应式原理。完整版Vue包含更多优化和功能，但这个简化版有助于理解基本原理。
