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 条评论
回复 删除
下一页