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