个人网站方案建设书,网站seo快速优化,修改网站图片,沈阳网站建设模板文章目录 一、Vue 核心架构设计1.1 整体架构流程图1.2 模块职责划分 二、响应式系统源码解析2.1 核心类关系图2.2 核心源码分析2.2.1 数据劫持实现2.2.2 依赖收集过程 三、虚拟DOM与Diff算法实现3.1 Diff算法流程图3.2 核心Diff源码 四、模板编译全流程剖析4.1 编译流程图4.2 编… 文章目录 一、Vue 核心架构设计1.1 整体架构流程图1.2 模块职责划分 二、响应式系统源码解析2.1 核心类关系图2.2 核心源码分析2.2.1 数据劫持实现2.2.2 依赖收集过程 三、虚拟DOM与Diff算法实现3.1 Diff算法流程图3.2 核心Diff源码 四、模板编译全流程剖析4.1 编译流程图4.2 编译阶段源码 五、组件系统与生命周期5.1 组件初始化流程5.2 生命周期源码触发点 六、异步更新队列与性能优化6.1 更新队列流程图6.2 核心实现代码 七、Vue 3 新特性源码对比7.1 响应式系统升级7.2 编译优化对比 八、手写迷你Vue框架实战8.1 核心实现代码 总结 一、Vue 核心架构设计
1.1 整体架构流程图 #mermaid-svg-mhkj6gM6eyPCsS1G {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-mhkj6gM6eyPCsS1G .error-icon{fill:#552222;}#mermaid-svg-mhkj6gM6eyPCsS1G .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-mhkj6gM6eyPCsS1G .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-mhkj6gM6eyPCsS1G .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-mhkj6gM6eyPCsS1G .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-mhkj6gM6eyPCsS1G .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-mhkj6gM6eyPCsS1G .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-mhkj6gM6eyPCsS1G .marker{fill:#333333;stroke:#333333;}#mermaid-svg-mhkj6gM6eyPCsS1G .marker.cross{stroke:#333333;}#mermaid-svg-mhkj6gM6eyPCsS1G svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-mhkj6gM6eyPCsS1G .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-mhkj6gM6eyPCsS1G .cluster-label text{fill:#333;}#mermaid-svg-mhkj6gM6eyPCsS1G .cluster-label span{color:#333;}#mermaid-svg-mhkj6gM6eyPCsS1G .label text,#mermaid-svg-mhkj6gM6eyPCsS1G span{fill:#333;color:#333;}#mermaid-svg-mhkj6gM6eyPCsS1G .node rect,#mermaid-svg-mhkj6gM6eyPCsS1G .node circle,#mermaid-svg-mhkj6gM6eyPCsS1G .node ellipse,#mermaid-svg-mhkj6gM6eyPCsS1G .node polygon,#mermaid-svg-mhkj6gM6eyPCsS1G .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-mhkj6gM6eyPCsS1G .node .label{text-align:center;}#mermaid-svg-mhkj6gM6eyPCsS1G .node.clickable{cursor:pointer;}#mermaid-svg-mhkj6gM6eyPCsS1G .arrowheadPath{fill:#333333;}#mermaid-svg-mhkj6gM6eyPCsS1G .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-mhkj6gM6eyPCsS1G .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-mhkj6gM6eyPCsS1G .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-mhkj6gM6eyPCsS1G .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-mhkj6gM6eyPCsS1G .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-mhkj6gM6eyPCsS1G .cluster text{fill:#333;}#mermaid-svg-mhkj6gM6eyPCsS1G .cluster span{color:#333;}#mermaid-svg-mhkj6gM6eyPCsS1G div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-mhkj6gM6eyPCsS1G :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 模板/JSX 编译器 渲染函数 虚拟DOM树 Patch算法 真实DOM 数据响应系统 依赖收集 派发更新 1.2 模块职责划分
模块源码文件核心职责响应式系统src/core/observer数据劫持/依赖管理虚拟DOMsrc/core/vdomVNode创建/Diff/Patch编译器src/compiler模板转渲染函数组件系统src/core/instance组件实例生命周期管理 二、响应式系统源码解析
2.1 核心类关系图 #mermaid-svg-uGCzi0sww6qiRHWU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-uGCzi0sww6qiRHWU .error-icon{fill:#552222;}#mermaid-svg-uGCzi0sww6qiRHWU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-uGCzi0sww6qiRHWU .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-uGCzi0sww6qiRHWU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-uGCzi0sww6qiRHWU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-uGCzi0sww6qiRHWU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-uGCzi0sww6qiRHWU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-uGCzi0sww6qiRHWU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-uGCzi0sww6qiRHWU .marker.cross{stroke:#333333;}#mermaid-svg-uGCzi0sww6qiRHWU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-uGCzi0sww6qiRHWU g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-uGCzi0sww6qiRHWU g.classGroup text .title{font-weight:bolder;}#mermaid-svg-uGCzi0sww6qiRHWU .nodeLabel,#mermaid-svg-uGCzi0sww6qiRHWU .edgeLabel{color:#131300;}#mermaid-svg-uGCzi0sww6qiRHWU .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-uGCzi0sww6qiRHWU .label text{fill:#131300;}#mermaid-svg-uGCzi0sww6qiRHWU .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-uGCzi0sww6qiRHWU .classTitle{font-weight:bolder;}#mermaid-svg-uGCzi0sww6qiRHWU .node rect,#mermaid-svg-uGCzi0sww6qiRHWU .node circle,#mermaid-svg-uGCzi0sww6qiRHWU .node ellipse,#mermaid-svg-uGCzi0sww6qiRHWU .node polygon,#mermaid-svg-uGCzi0sww6qiRHWU .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-uGCzi0sww6qiRHWU .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-uGCzi0sww6qiRHWU g.clickable{cursor:pointer;}#mermaid-svg-uGCzi0sww6qiRHWU g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-uGCzi0sww6qiRHWU g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-uGCzi0sww6qiRHWU .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-uGCzi0sww6qiRHWU .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-uGCzi0sww6qiRHWU .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-uGCzi0sww6qiRHWU .dashed-line{stroke-dasharray:3;}#mermaid-svg-uGCzi0sww6qiRHWU #compositionStart,#mermaid-svg-uGCzi0sww6qiRHWU .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-uGCzi0sww6qiRHWU #compositionEnd,#mermaid-svg-uGCzi0sww6qiRHWU .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-uGCzi0sww6qiRHWU #dependencyStart,#mermaid-svg-uGCzi0sww6qiRHWU .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-uGCzi0sww6qiRHWU #dependencyStart,#mermaid-svg-uGCzi0sww6qiRHWU .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-uGCzi0sww6qiRHWU #extensionStart,#mermaid-svg-uGCzi0sww6qiRHWU .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-uGCzi0sww6qiRHWU #extensionEnd,#mermaid-svg-uGCzi0sww6qiRHWU .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-uGCzi0sww6qiRHWU #aggregationStart,#mermaid-svg-uGCzi0sww6qiRHWU .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-uGCzi0sww6qiRHWU #aggregationEnd,#mermaid-svg-uGCzi0sww6qiRHWU .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-uGCzi0sww6qiRHWU .edgeTerminals{font-size:11px;}#mermaid-svg-uGCzi0sww6qiRHWU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Observer walk(data) defineReactive() Dep subs: Watcher[] depend() notify() Watcher get() update() 2.2 核心源码分析
2.2.1 数据劫持实现
// src/core/observer/index.js
export class Observer {constructor(value) {this.value valuethis.dep new Dep()def(value, __ob__, this)if (Array.isArray(value)) {this.observeArray(value)} else {this.walk(value)}}walk(obj) {const keys Object.keys(obj)for (let i 0; i keys.length; i) {defineReactive(obj, keys[i])}}
}function defineReactive(obj, key) {const dep new Dep()let val obj[key]Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter() {if (Dep.target) {dep.depend() // 依赖收集}return val},set: function reactiveSetter(newVal) {if (newVal val) returnval newValdep.notify() // 触发更新}})
}2.2.2 依赖收集过程
// src/core/observer/dep.js
let uid 0
export default class Dep {static target nullconstructor() {this.id uidthis.subs []}depend() {if (Dep.target) {Dep.target.addDep(this)}}notify() {const subs this.subs.slice()for (let i 0; i subs.length; i) {subs[i].update() // 通知Watcher更新}}
}三、虚拟DOM与Diff算法实现
3.1 Diff算法流程图 #mermaid-svg-wk0UDe08e9fZunP1 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-wk0UDe08e9fZunP1 .error-icon{fill:#552222;}#mermaid-svg-wk0UDe08e9fZunP1 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-wk0UDe08e9fZunP1 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-wk0UDe08e9fZunP1 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-wk0UDe08e9fZunP1 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-wk0UDe08e9fZunP1 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-wk0UDe08e9fZunP1 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-wk0UDe08e9fZunP1 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-wk0UDe08e9fZunP1 .marker.cross{stroke:#333333;}#mermaid-svg-wk0UDe08e9fZunP1 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-wk0UDe08e9fZunP1 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-wk0UDe08e9fZunP1 .cluster-label text{fill:#333;}#mermaid-svg-wk0UDe08e9fZunP1 .cluster-label span{color:#333;}#mermaid-svg-wk0UDe08e9fZunP1 .label text,#mermaid-svg-wk0UDe08e9fZunP1 span{fill:#333;color:#333;}#mermaid-svg-wk0UDe08e9fZunP1 .node rect,#mermaid-svg-wk0UDe08e9fZunP1 .node circle,#mermaid-svg-wk0UDe08e9fZunP1 .node ellipse,#mermaid-svg-wk0UDe08e9fZunP1 .node polygon,#mermaid-svg-wk0UDe08e9fZunP1 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-wk0UDe08e9fZunP1 .node .label{text-align:center;}#mermaid-svg-wk0UDe08e9fZunP1 .node.clickable{cursor:pointer;}#mermaid-svg-wk0UDe08e9fZunP1 .arrowheadPath{fill:#333333;}#mermaid-svg-wk0UDe08e9fZunP1 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-wk0UDe08e9fZunP1 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-wk0UDe08e9fZunP1 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-wk0UDe08e9fZunP1 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-wk0UDe08e9fZunP1 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-wk0UDe08e9fZunP1 .cluster text{fill:#333;}#mermaid-svg-wk0UDe08e9fZunP1 .cluster span{color:#333;}#mermaid-svg-wk0UDe08e9fZunP1 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-wk0UDe08e9fZunP1 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Yes No Yes No Yes No 新旧VNode对比 相同节点? 更新属性 替换节点 有子节点? 执行子节点Diff 流程结束 双指针遍历 找到可复用节点? 移动节点 新建节点 3.2 核心Diff源码
// src/core/vdom/patch.js
function updateChildren(parentElm, oldCh, newCh) {let oldStartIdx 0let newStartIdx 0let oldEndIdx oldCh.length - 1let newEndIdx newCh.length - 1while (oldStartIdx oldEndIdx newStartIdx newEndIdx) {if (sameVnode(oldStartVnode, newStartVnode)) {patchVnode(...)oldStartIdxnewStartIdx} // ...其他四种情况处理}if (oldStartIdx oldEndIdx) {addVnodes(...)} else if (newStartIdx newEndIdx) {removeVnodes(...)}
}四、模板编译全流程剖析
4.1 编译流程图 #mermaid-svg-qEnvyuSYHxBbeA0S {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-qEnvyuSYHxBbeA0S .error-icon{fill:#552222;}#mermaid-svg-qEnvyuSYHxBbeA0S .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-qEnvyuSYHxBbeA0S .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-qEnvyuSYHxBbeA0S .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-qEnvyuSYHxBbeA0S .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-qEnvyuSYHxBbeA0S .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-qEnvyuSYHxBbeA0S .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-qEnvyuSYHxBbeA0S .marker{fill:#333333;stroke:#333333;}#mermaid-svg-qEnvyuSYHxBbeA0S .marker.cross{stroke:#333333;}#mermaid-svg-qEnvyuSYHxBbeA0S svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-qEnvyuSYHxBbeA0S .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-qEnvyuSYHxBbeA0S text.actortspan{fill:black;stroke:none;}#mermaid-svg-qEnvyuSYHxBbeA0S .actor-line{stroke:grey;}#mermaid-svg-qEnvyuSYHxBbeA0S .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-qEnvyuSYHxBbeA0S .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-qEnvyuSYHxBbeA0S #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-qEnvyuSYHxBbeA0S .sequenceNumber{fill:white;}#mermaid-svg-qEnvyuSYHxBbeA0S #sequencenumber{fill:#333;}#mermaid-svg-qEnvyuSYHxBbeA0S #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-qEnvyuSYHxBbeA0S .messageText{fill:#333;stroke:#333;}#mermaid-svg-qEnvyuSYHxBbeA0S .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-qEnvyuSYHxBbeA0S .labelText,#mermaid-svg-qEnvyuSYHxBbeA0S .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-qEnvyuSYHxBbeA0S .loopText,#mermaid-svg-qEnvyuSYHxBbeA0S .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-qEnvyuSYHxBbeA0S .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-qEnvyuSYHxBbeA0S .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-qEnvyuSYHxBbeA0S .noteText,#mermaid-svg-qEnvyuSYHxBbeA0S .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-qEnvyuSYHxBbeA0S .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-qEnvyuSYHxBbeA0S .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-qEnvyuSYHxBbeA0S .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-qEnvyuSYHxBbeA0S .actorPopupMenu{position:absolute;}#mermaid-svg-qEnvyuSYHxBbeA0S .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-qEnvyuSYHxBbeA0S .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-qEnvyuSYHxBbeA0S .actor-man circle,#mermaid-svg-qEnvyuSYHxBbeA0S line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-qEnvyuSYHxBbeA0S :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Template AST Render 解析器生成抽象语法树 优化器标记静态节点 代码生成器输出渲染函数 Template AST Render 4.2 编译阶段源码
// src/compiler/index.js
export function compileToFunctions(template) {const ast parse(template.trim()) // 生成ASToptimize(ast) // 静态标记const code generate(ast) // 生成代码return {render: new Function(code.render),staticRenderFns: code.staticRenderFns.map(fn new Function(fn))}
}// 生成的渲染函数示例
function render() {with(this){return _c(div,{attrs:{id:app}},[_c(p,[_v(_s(message))]),_c(button,{on:{click:handleClick}},[_v(Click)])])}
}五、组件系统与生命周期
5.1 组件初始化流程 #mermaid-svg-KdGe3hfLWwq3tZ9s {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-KdGe3hfLWwq3tZ9s .error-icon{fill:#552222;}#mermaid-svg-KdGe3hfLWwq3tZ9s .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-KdGe3hfLWwq3tZ9s .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-KdGe3hfLWwq3tZ9s .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-KdGe3hfLWwq3tZ9s .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-KdGe3hfLWwq3tZ9s .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-KdGe3hfLWwq3tZ9s .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-KdGe3hfLWwq3tZ9s .marker{fill:#333333;stroke:#333333;}#mermaid-svg-KdGe3hfLWwq3tZ9s .marker.cross{stroke:#333333;}#mermaid-svg-KdGe3hfLWwq3tZ9s svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-KdGe3hfLWwq3tZ9s .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-KdGe3hfLWwq3tZ9s text.actortspan{fill:black;stroke:none;}#mermaid-svg-KdGe3hfLWwq3tZ9s .actor-line{stroke:grey;}#mermaid-svg-KdGe3hfLWwq3tZ9s .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-KdGe3hfLWwq3tZ9s .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-KdGe3hfLWwq3tZ9s #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-KdGe3hfLWwq3tZ9s .sequenceNumber{fill:white;}#mermaid-svg-KdGe3hfLWwq3tZ9s #sequencenumber{fill:#333;}#mermaid-svg-KdGe3hfLWwq3tZ9s #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-KdGe3hfLWwq3tZ9s .messageText{fill:#333;stroke:#333;}#mermaid-svg-KdGe3hfLWwq3tZ9s .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-KdGe3hfLWwq3tZ9s .labelText,#mermaid-svg-KdGe3hfLWwq3tZ9s .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-KdGe3hfLWwq3tZ9s .loopText,#mermaid-svg-KdGe3hfLWwq3tZ9s .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-KdGe3hfLWwq3tZ9s .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-KdGe3hfLWwq3tZ9s .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-KdGe3hfLWwq3tZ9s .noteText,#mermaid-svg-KdGe3hfLWwq3tZ9s .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-KdGe3hfLWwq3tZ9s .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-KdGe3hfLWwq3tZ9s .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-KdGe3hfLWwq3tZ9s .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-KdGe3hfLWwq3tZ9s .actorPopupMenu{position:absolute;}#mermaid-svg-KdGe3hfLWwq3tZ9s .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-KdGe3hfLWwq3tZ9s .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-KdGe3hfLWwq3tZ9s .actor-man circle,#mermaid-svg-KdGe3hfLWwq3tZ9s line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-KdGe3hfLWwq3tZ9s :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} initMixin VueComponent patch 合并选项 初始化生命周期 初始化事件 初始化渲染 创建$el initMixin VueComponent patch 5.2 生命周期源码触发点
// src/core/instance/init.js
Vue.prototype._init function (options) {// ...initLifecycle(vm)initEvents(vm)initRender(vm)callHook(vm, beforeCreate)initInjections(vm)initState(vm)initProvide(vm)callHook(vm, created)if (vm.$options.el) {vm.$mount(vm.$options.el)}
}六、异步更新队列与性能优化
6.1 更新队列流程图 #mermaid-svg-CQ83CBh6JTmJZf5S {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-CQ83CBh6JTmJZf5S .error-icon{fill:#552222;}#mermaid-svg-CQ83CBh6JTmJZf5S .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-CQ83CBh6JTmJZf5S .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-CQ83CBh6JTmJZf5S .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-CQ83CBh6JTmJZf5S .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-CQ83CBh6JTmJZf5S .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-CQ83CBh6JTmJZf5S .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-CQ83CBh6JTmJZf5S .marker{fill:#333333;stroke:#333333;}#mermaid-svg-CQ83CBh6JTmJZf5S .marker.cross{stroke:#333333;}#mermaid-svg-CQ83CBh6JTmJZf5S svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-CQ83CBh6JTmJZf5S .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-CQ83CBh6JTmJZf5S .cluster-label text{fill:#333;}#mermaid-svg-CQ83CBh6JTmJZf5S .cluster-label span{color:#333;}#mermaid-svg-CQ83CBh6JTmJZf5S .label text,#mermaid-svg-CQ83CBh6JTmJZf5S span{fill:#333;color:#333;}#mermaid-svg-CQ83CBh6JTmJZf5S .node rect,#mermaid-svg-CQ83CBh6JTmJZf5S .node circle,#mermaid-svg-CQ83CBh6JTmJZf5S .node ellipse,#mermaid-svg-CQ83CBh6JTmJZf5S .node polygon,#mermaid-svg-CQ83CBh6JTmJZf5S .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-CQ83CBh6JTmJZf5S .node .label{text-align:center;}#mermaid-svg-CQ83CBh6JTmJZf5S .node.clickable{cursor:pointer;}#mermaid-svg-CQ83CBh6JTmJZf5S .arrowheadPath{fill:#333333;}#mermaid-svg-CQ83CBh6JTmJZf5S .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-CQ83CBh6JTmJZf5S .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-CQ83CBh6JTmJZf5S .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-CQ83CBh6JTmJZf5S .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-CQ83CBh6JTmJZf5S .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-CQ83CBh6JTmJZf5S .cluster text{fill:#333;}#mermaid-svg-CQ83CBh6JTmJZf5S .cluster span{color:#333;}#mermaid-svg-CQ83CBh6JTmJZf5S div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-CQ83CBh6JTmJZf5S :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 数据变更 触发setter 将Watcher推入队列 nextTick后执行 执行Watcher.run 触发组件更新 6.2 核心实现代码
// src/core/observer/scheduler.js
const queue []
let waiting falsefunction flushSchedulerQueue() {queue.sort((a, b) a.id - b.id) // 保证父组件先更新for (let i 0; i queue.length; i) {const watcher queue[i]watcher.run()}resetSchedulerState()
}export function queueWatcher(watcher) {if (!queue.includes(watcher)) {queue.push(watcher)}if (!waiting) {nextTick(flushSchedulerQueue)waiting true}
}七、Vue 3 新特性源码对比
7.1 响应式系统升级
// Vue 3 使用Proxy实现
function reactive(target) {return new Proxy(target, {get(target, key, receiver) {track(target, key) // 依赖收集return Reflect.get(...arguments)},set(target, key, value, receiver) {Reflect.set(...arguments)trigger(target, key) // 触发更新}})
}7.2 编译优化对比
优化点Vue 2Vue 3静态提升无标记静态节点补丁标志全量Diff动态节点追踪缓存事件每次渲染重新创建缓存事件处理函数 八、手写迷你Vue框架实战
8.1 核心实现代码
class MyVue {constructor(options) {this.$options optionsthis._data options.data()new Observer(this._data)new Compiler(options.el, this)}
}class Observer {constructor(data) {this.walk(data)}walk(data) {Object.keys(data).forEach(key {defineReactive(data, key, data[key])})}
}function defineReactive(obj, key, val) {const dep new Dep()Object.defineProperty(obj, key, {get() {Dep.target dep.addSub(Dep.target)return val},set(newVal) {val newValdep.notify()}})
}总结
本文从Vue源码层面深入解析了响应式系统、虚拟DOM、模板编译等核心模块的实现原理。建议通过以下方式进一步学习
使用Vue官方调试版本进行断点调试参与Vue源码GitHub Issue讨论对比不同版本实现差异
