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