vue2.x源码阅读导图
2021-11-08 14:05:37 0 举报AI智能生成
vue2.x源码学习流程以及文件作用详细描述
作者其他创作
大纲/内容
目录分析
dist 发布目录
examples 范例，测试文件代码
packages 核心代码之外的独立库
scripts 构建脚本
src 源码
flow 类型文件
types 类型文件
src/compiler 编译器相关
src/core 核心代码
异步更新
dep.notify()
通知更新
通知更新
watcher.update()
入队请求
入队请求
queueWatcher
入队去重启动异步
入队去重启动异步
nextTick()
添加调用异步任务
添加调用异步任务
timerFunc()
异步队列刷新工作
异步队列刷新工作
watcher.run()
真正执行更新操作
真正执行更新操作
初始化流程
- 入口文件： 扩展$mount:处理可能存在的template或者el选项
src/platforms/web/entry-runtime-with-compiler.js
web运行时代码： 实现$mount
src/platforms/web/runtime/index.js
src/platforms/web/runtime/index.js
__patch__
$mount
全局定义API
src/core/index.js
src/core/index.js
/global-api/index
set
delete
nextTick
...
声明Vue构造函数
src/core/instance/index.js
src/core/instance/index.js
initMixin
实现this._init(options)
实现this._init(options)
merge options
合并配置选项
合并配置选项
initLifecycle
初始化生命周期
初始化生命周期
initEvents
自定义事件的监听
自定义事件的监听
initRender
初始化渲染
初始化渲染
callhook('vm',beforeCreate)
调用beforeCreate生命周期函数
调用beforeCreate生命周期函数
initInjections
初始化注入绑定
初始化注入绑定
initState
初始化属性方法
初始化属性方法
props
methods
data
computed
watch
initProvide
callHook(vm, 'created')
vm.$mount(vm.$options.el)
当设置了el选项时自动调用$mount 生成真实dom
当设置了el选项时自动调用$mount 生成真实dom
stateMixin
src/core/instance/state.js
src/core/instance/state.js
$data
$props
$set
$delete
$watch
eventsMixin
src/core/instance/events.js
src/core/instance/events.js
$on
$once
$off
$emit
lifecycleMixin
src/core/instance/lifecycle.js
src/core/instance/lifecycle.js
_update
$forceUpdate
$destroy
renderMixin
src/core/instance/render.js
src/core/instance/render.js
$nextTick
_render
数据响应式
initState：data数据的处理
src/core/instance/state.js
src/core/instance/state.js
initData
数据响应式开始
数据响应式开始
observe()
返回ob实例， ob对value做响应式
返回ob实例， ob对value做响应式
Observer
判断value类型,创建小秘书ob
判断value类型,创建小秘书ob
observeArray(value)
对数组响应式
对数组响应式
array.js
对数组的7个方法覆盖处理
对数组的7个方法覆盖处理
walk()
处理对象
处理对象
defineReactive()
数据的访问拦截
数据的访问拦截
Dep
依赖管理，变更通知
依赖管理，变更通知
两种dep的作用
watcher
和组件挂钩或者与用户自定义的$watch挂钩，数据变更后执行
和组件挂钩或者与用户自定义的$watch挂钩，数据变更后执行
dep和watcher之间的映射规则
虚拟dom
src/core/observer/watcher.js
执行更新：watcher.run()
执行更新：watcher.run()
src/core/instance/lifecycle.js
组件更新：updateComponent()
组件更新：updateComponent()
src/core/instance/render.js
计算虚拟dom：render()
计算虚拟dom：render()
src/core/instance/lifecycle.js
转换vdom为dom：_update()
转换vdom为dom：_update()
src/core/vdom/patch.js
打补丁：patch()
打补丁：patch()
树级别比较patch()
不存在新vnode，删
不存在老vnode，增
都存在：修改
diff发生的地方
diff发生的地方
递归的更新节点：patchVnode()
新旧dom均有文本且不通，文本更新
属性更新
新旧vnode均有孩子
重排整体策略：
首先假设新旧首尾节点有相同，则直接patch它们
若没有，则从旧的节点中查找跟新的节点首个相同的，找到并patch，找不到创建
若先遍历完新旧其中一个children则循环结束，开始收尾工作，新节点先遍历完批量删除旧节点剩余的节点，旧节点先遍历完则批量增加新节点剩余的节点
首先假设新旧首尾节点有相同，则直接patch它们
若没有，则从旧的节点中查找跟新的节点首个相同的，找到并patch，找不到创建
若先遍历完新旧其中一个children则循环结束，开始收尾工作，新节点先遍历完批量删除旧节点剩余的节点，旧节点先遍历完则批量增加新节点剩余的节点
首尾两两对比过程
在旧节点中查找与新节点相同元素的过程
循环收尾的结束工作
只有新vnode有孩子，新增
只有老vnode有孩子，删除
只有老vnode有文本，清空
节点创建createElm
自定义组件创建createComponent
保留节点创建
收藏
0 条评论
下一页
为你推荐
查看更多
