

首页  思维导图  详情



vue2.x源码阅读导图

2021-11-08 14:05:37   0  举报





AI智能生成

vue2.x源码学习流程以及文件作用详细描述

vue2源码学习

模版推荐

作者其他创作

大纲/内容

目录分析

dist 发布目录

examples 范例，测试文件代码

packages 核心代码之外的独立库

scripts 构建脚本

src 源码

flow 类型文件

types 类型文件

src/compiler 编译器相关

src/core 核心代码

异步更新

dep.notify() 通知更新

watcher.update() 入队请求

queueWatcher 入队去重启动异步

nextTick() 添加调用异步任务

timerFunc() 异步队列刷新工作

watcher.run() 真正执行更新操作

初始化流程

<ul><li>入口文件：扩展$mount:处理可能存在的template或者el选项 src/platforms/web/entry-runtime-with-compiler.js</li></ul>

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

__patch__

$mount

全局定义API src/core/index.js

/global-api/index

set

delete

nextTick

...

声明Vue构造函数 src/core/instance/index.js

initMixin 实现this._init(options)

merge options 合并配置选项

initLifecycle 初始化生命周期

initEvents 自定义事件的监听

initRender 初始化渲染

callhook('vm',beforeCreate) 调用beforeCreate生命周期函数

initInjections 初始化注入绑定

initState 初始化属性方法

props

methods

data

computed

watch

initProvide

callHook(vm, 'created')

vm.$mount(vm.$options.el) 当设置了el选项时自动调用$mount  生成真实dom

stateMixin src/core/instance/state.js

$data

$props

$set

$delete

$watch

eventsMixin src/core/instance/events.js

$on

$once

$off

$emit

lifecycleMixin src/core/instance/lifecycle.js

_update

$forceUpdate

$destroy

renderMixin src/core/instance/render.js

$nextTick

_render

数据响应式

initState：data数据的处理 src/core/instance/state.js

initData 数据响应式开始

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

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

observeArray(value) 对数组响应式

array.js 对数组的7个方法覆盖处理

walk() 处理对象

defineReactive() 数据的访问拦截

Dep 依赖管理，变更通知

两种dep的作用

watcher 和组件挂钩或者与用户自定义的$watch挂钩，数据变更后执行

dep和watcher之间的映射规则

虚拟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 转换vdom为dom：_update()

src/core/vdom/patch.js 打补丁：patch()

树级别比较patch()

不存在新vnode，删

不存在老vnode，增

都存在：修改 diff发生的地方

递归的更新节点：patchVnode()

新旧dom均有文本且不通，文本更新

属性更新

新旧vnode均有孩子

重排整体策略： 首先假设新旧首尾节点有相同，则直接patch它们 若没有，则从旧的节点中查找跟新的节点首个相同的，找到并patch，找不到创建 若先遍历完新旧其中一个children则循环结束，开始收尾工作，新节点先遍历完批量删除旧节点剩余的节点，旧节点先遍历完则批量增加新节点剩余的节点

首尾两两对比过程

在旧节点中查找与新节点相同元素的过程

循环收尾的结束工作

只有新vnode有孩子，新增

只有老vnode有孩子，删除

只有老vnode有文本，清空

节点创建createElm

自定义组件创建createComponent

保留节点创建

 Collect

Get Started

源码阅读技巧

 Collect

Get Started

Part2阅读与鉴赏

 Collect

Get Started

阅读

 Collect

Get Started

X计划





0 条评论

下一页