手撸一个Vue(看不懂可以举报)

手撸一个Vue(看不懂可以举报)作为编程讲师我深知很多同学对Vue的响应式原理充满好奇却又望而却步。今天我们就从零开始一步一步“手撸”一个简化版的Vue。如果你看完还看不懂欢迎举报我但请相信跟着代码走一遍你会发现自己比想象中更强大。## 什么是Vue的核心Vue的核心是“响应式数据”和“模板渲染”。简单来说就是当数据变化时视图自动更新。要实现这个我们需要解决三个问题1.如何监听数据变化—— 使用Object.definePropertyVue2或ProxyVue3。2.如何知道哪些视图依赖了哪些数据—— 通过“依赖收集”。3.数据变化时如何更新视图—— 触发更新函数。我们先从最简单的版本开始一步步完善。## 第一步监听数据变化基础版我们先用Object.defineProperty实现数据监听。这个API可以拦截对象的读取和赋值操作。javascript// 监听对象的所有属性function observe(obj) { if (typeof obj ! object || obj null) return; Object.keys(obj).forEach(key { let value obj[key]; // 递归监听嵌套对象 observe(value); Object.defineProperty(obj, key, { get() { console.log(读取属性 ${key}: ${value}); return value; }, set(newVal) { if (newVal ! value) { console.log(更新属性 ${key}: ${value} - ${newVal}); value newVal; // 如果新值是对象继续监听 observe(newVal); } } }); });}// 测试const data { name: 小明, age: 18 };observe(data);data.name 小红; // 输出更新属性 name: 小明 - 小红console.log(data.name); // 输出读取属性 name: 小红运行这段代码你会发现每次读取或修改属性时控制台都会打印信息。这就是Vue2响应式的底层基础。## 第二步依赖收集中级版光监听数据还不够我们需要知道“谁”依赖了这个数据。比如模板中用到了{{ name }}那么当name变化时就要重新渲染这个模板片段。这里我们引入一个“依赖管理器”——DepDependency每个属性都有一个Dep实例。当读取属性时把当前的“观察者”Watcher加入依赖列表当属性变化时通知所有观察者更新。javascript// 依赖管理器class Dep { constructor() { this.subs []; // 存储所有观察者 } // 添加观察者 addSub(watcher) { this.subs.push(watcher); } // 通知所有观察者 notify() { this.subs.forEach(watcher watcher.update()); }}// 观察者代表一个需要更新的视图片段class Watcher { constructor(obj, key, callback) { this.obj obj; this.key key; this.callback callback; // 在读取属性前先把当前Watcher存入全局 Dep.target this; // 触发getter把当前Watcher加入依赖 obj[key]; Dep.target null; } update() { console.log(属性 ${this.key} 变化了执行更新); this.callback(); }}// 改造observe函数为每个属性创建Depfunction observe(obj) { if (typeof obj ! object || obj null) return; Object.keys(obj).forEach(key { let value obj[key]; const dep new Dep(); // 每个属性有自己的Dep observe(value); Object.defineProperty(obj, key, { get() { // 如果当前有Watcher在读取就加入依赖 if (Dep.target) { dep.addSub(Dep.target); } return value; }, set(newVal) { if (newVal ! value) { value newVal; observe(newVal); dep.notify(); // 通知所有观察者 } } }); });}// 测试const data { name: 小明 };observe(data);// 创建一个观察者依赖data.namenew Watcher(data, name, () { console.log(视图更新显示新名字);});data.name 小红; // 输出属性 name 变化了执行更新// 输出视图更新显示新名字现在当data.name变化时对应的观察者就会执行更新函数。这就是Vue依赖收集的雏形。## 第三步实现微型Vue高级版现在我们把上面的概念组合成一个微型Vue类。它接收一个选项对象包含data和el挂载元素并解析模板中的{{}}插值。javascriptclass MiniVue { constructor(options) { this.$options options; this.$data options.data; // 1. 监听数据 observe(this.$data); // 2. 编译模板 this.$el document.querySelector(options.el); this.compile(this.$el); } // 编译模板替换{{}}为数据 compile(node) { const childNodes node.childNodes; childNodes.forEach(child { if (child.nodeType 3) { // 文本节点 const oldText child.textContent; const reg /\{\{(.*?)\}\}/g; // 匹配{{key}} if (reg.test(oldText)) { // 提取变量名 const key RegExp.$1.trim(); // 创建观察者数据变化时更新文本 new Watcher(this.$data, key, () { child.textContent oldText.replace(reg, this.$data[key]); }); // 初始化渲染 child.textContent oldText.replace(reg, this.$data[key]); } } else if (child.nodeType 1) { // 元素节点递归编译 this.compile(child); } }); }}// 使用微型Vueconst app new MiniVue({ el: #app, data: { message: Hello Vue!, count: 0 }});// 3秒后修改数据视图自动更新setTimeout(() { app.$data.message Hello MiniVue!;}, 3000);对应的HTMLhtmldiv idapp p{{ message }}/p p{{ count }}/p/div运行这段代码你会看到页面显示“Hello Vue!”3秒后自动变成“Hello MiniVue!”。恭喜你你已经手撸了一个微型Vue## 第四步进阶思考我们的微型Vue还有哪些不足1.不支持数组Object.defineProperty无法监听数组索引变化Vue2通过重写数组方法解决。2.不支持v-model等指令真正的Vue有复杂的指令系统。3.性能优化模板编译可以生成渲染函数而不是直接操作DOM。4.计算属性和侦听器需要额外的依赖管理。Vue3使用Proxy替代Object.defineProperty可以原生监听数组和动态新增属性性能也更好。## 总结通过本文我们一步步实现了-数据监听使用Object.defineProperty拦截get/set。-依赖收集Dep管理Watcher在get时收集依赖set时通知更新。-模板编译解析{{}}插值创建Watcher实现数据驱动视图。虽然只有100多行代码但已经包含了Vue响应式系统的核心思想。现在你应该明白Vue并不是什么黑魔法而是一套优雅的设计模式。如果你跟着代码写了一遍还是不懂欢迎举报我——但请带上你的代码我们一起debug编程路上动手永远比空想更重要。下次面试官问你Vue原理你可以自信地说“我手撸过一个。”