Vue原理
2021-10-13 15:48:51 1 举报AI智能生成
登录查看完整内容
Vue原理脑图，包括MVVM的基本原理，以及Vue 3.x的优化点。
作者其他创作
大纲/内容
queueWatcher异步批量：通过nexttick异步执行flushSchedulerQueue，批量调用run方法
同步执行run
update时，执行run方法
调用get方法时，通过pushTarget绑定Dep.target
run方法会调用实例化是的cb，通知视图更新
Watcher
收集依赖：dependence
depend：添加依赖关系
notify：通知变化
Dep.target/targetStack
Dep
tag:vnode的标签属性
children:vnode的子节点
text:文本属性
elm:这个vnode对应的真实dom节点
key:vnode的标记，在diff过程中可以提高diff的效率，后文有讲解
vNode是个对象
方案一：document.createRange()
方案二：document.createDocumentFragment()
vue方案：snabbdom的h函数+patch函数
对应vm
patchFlag:对静态节点跳过diff过程
事件默认开缓存
Vue 3.x优化
通过diff算法更新dom
Updater
劫持监听所有属性
getter
setter
Object.defineProperty()
对应model
使用Proxy代理对象
Observer
解析html模版
v-model
v-bind
v-on
Compiler
Promise:微任务
MutationObserver：H5微任务
setImmediate：Node宏任务
setTimeout：宏任务
nexttick
for循环执行queue
flushSchedulerQueue
queueWatcher
老节点不存在，创建新节点对应的dom
老节点不是真实dom，而且新老节点相同，调用patchVnode
其他，删除老节点
patch
新老节点都有子节点，调用updateChildren
新节点才有子节点，添加新子节点
老节点才有子节点，移除老子节点
文本设置为''
老节点是文本节点
新node是常规节点
替换老node的值
新node是文本节点，且文本值与老node不同
patchVnode/diff过程
头头对比
尾尾对比
头尾对比
尾头对比
key对比
创建新节点
其他
老子节点数组先遍历完，添加其他新子节点
新子节点数组先遍历完，移除多余的老子节点
updateChildren，再调用patchVnode
diff算法
MVVM
0 条评论
回复 删除
下一页
