

首页  思维导图  详情



Vue源码

2020-10-13 18:16:23   0  举报





AI智能生成

vue 2.0源码整体结构，用于学习和教学可帮你快速理清思路

vue

源码结构

模版推荐

作者其他创作

大纲/内容

初始化流程

入口文件：覆盖$mount platforms/web/entry-runtime-with-compiler

web运行时代码：实现$mount platforms/web/runtime/index

$mount

__patch__

全局api定义 core/index

core/global-api/index

set

delete

nextTick

...

Vue构造函数 core/instance/index

initMixin：实现_init() core/instance/init.js

initLifecycle

initEvents

initRender

beforeCreate

initInjections

initState

initProvide

created

stateMixin

$data,$props,$set,$delete,$watch

eventsMixin

$on,$emit,$once,$off

lifecycleMixin

_update,$forceUpdate,$destroy

renderMixin

$nextTick,_render

数据响应式

data的数据响应式 src/core/instance/state.js

initState() 数据响应式起始

observe() 返回ob实例，ob对value做响应式

Observer 判断value类型，创建小秘书ob

walk()

defineReactive() 数据的访问拦截

observeArray()

Dep 依赖管理，变更通知

Watcher 和组件挂钩或者和用户定义的观察表达式挂钩，数据变更后执行更新

array.js 数组的特殊处理，覆盖能够改变数组的7个方法

异步更新

dep.notify()

watcher.update()

queueWatcher()

nextTick()

timerFunc()

watcher.run()

虚拟DOM

src\core\observer\watcher.js 执行更新：watcher.run()

src\core\instance\lifecycle.js 组件更新：updateComponent()

src\core\instance\render.js 计算虚拟dom：_render()

src\core\instance\lifecycle.js 更新：_update()，转换vnode为dom

src\core\vdom\patch.js 打补丁：patch()，转换实际执行函数，patching，diff

同层比较 patch()

节点创建createElm()

自定义组件创建createComponent

保留节点创建

节点更新 patchVnode()

文本更新

属性更新

重排updateChildren()

编译器

整体流程

src\platforms\web\entry-runtime-with-compiler.js 获取渲染函数：compileToFunctions

src\platforms\web\compiler\index.js 编译函数生成

src\compiler\index.js createCompiler生成

src\compiler\create-compiler.js createCompilerCreator定义

src\compiler\to-function.js compileToFunctions生成

解析parse

parseHTML()

processIf

processFor

...

优化optimize

markStatic

markStaticRoots

生成generate

genElement

 Collect

Get Started

Vue 源码草图

 Collect

Get Started

vue前端架构图

 Collect

Get Started

MCP源码分析

 Collect

Get Started

Vue源码分析





0 条评论

下一页