登录免费注册



vue2源码

首页  思维导图  详情



vue2源码

2021-09-26 23:05:19   9  举报





AI智能生成

vue2源码，vue2源码结构图，vue2源码思维导图，vue2源码学习

vue2源码

vue2源码结构图

vue2源码思维导图

vue2源码学习

模版推荐

作者其他创作

大纲/内容

初始化流程

entry-runtime-with-compiler.js

runtime/index.js

core/index.js

initGlobalAPI

vue构造函数core\instance\index.js

initMixin

选项合并

initLifecycle

initEvents

initRender

callHook(vm, 'beforeCreate')

initInjections(vm)

initState(vm)

initProps

initMethods

initData 

observe

new Observer(value)

arrayMethods（数组原型函数重写）

observeArray（数组响应式）

walk（对象响应式）

defineReactive

get

当前属性的依赖收集dep.depend()

子对象的依赖收集childOb.dep.depend()

set

新增值的响应式observe(newVal)

变更通知dep.notify()

initComputed

defineComputed

initWatch

createWatcher

initProvide(vm)

callHook(vm, 'created')

stateMixin

eventsMixin

lifecycleMixin

renderMixin

挂载$mount

mountComponent

callHook(vm, 'beforeMount')

new Watcher(vm, updateComponent,...)

this.get()

updateComponent

_update()

patch

新vnode不存在-删除

老vnode不存在-新增

patchVnode

1.元素属性更新

2.新老vnode都存在子节点

updateChildren

1.四种猜想：首首 尾尾 首尾 尾首（比较）

2.循环查找新节点在老节点的位置

不存在创建createElm

存在

相同节点patchVnode & insertBefore移位

key相同节点标签不同创建 createElm

3.扫尾：老数组有剩下的批量删除removeVnodes

3.扫尾：新数组有剩下的批量新增addVnodes

3.老节点undef & 新节点def

addVnodes创建元素

4.老节点def & 新文本undef

removeVnodes移除元素

5.老节点文本 & 新节点无文本

setTextContent文本置空

6.新老节点都是文本

setTextContent文本更新

初始化

createElm

移除模板的宿主元素removeVnodes

异步更新

dep.notify()

遍历执行Watcher.update()

queueWatcher()

nextTick

timerFunc

flushCallbacks

flushSchedulerQueue

callHook(vm, 'beforeUpdate')

watcher.run()

callHook(vm, 'updated')

 Collect

Get Started

vue2.x源码阅读导图

 Collect

Get Started

vue2 底层响应式流程图

Vue学习笔记——从入门到实战

 Collect

Get Started

Vue学习笔记——从入门到实战

vue2、vue3、react事件调度分析

 Collect

Get Started

vue2、vue3、react事件调度分析













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document