登录免费注册



Vue原理

首页  思维导图  详情



Vue原理

2021-10-13 15:48:51   1  举报





AI智能生成

Vue原理脑图，包括MVVM的基本原理，以及Vue 3.x的优化点。

Vue原理

MVVM

Vue 2.0

模版推荐

作者其他创作

大纲/内容

Watcher

update时，执行run方法

queueWatcher异步批量：通过nexttick异步执行flushSchedulerQueue，批量调用run方法

同步执行run

new Watcher(vm,cb)

调用get方法时，通过pushTarget绑定Dep.target

run方法会调用实例化是的cb，通知视图更新

Dep

收集依赖：dependence

depend：添加依赖关系<br>

notify：通知变化

Dep.target/targetStack

Updater

vNode是个对象

tag:vnode的标签属性<br>

data:最后渲染成真实dom节点后，节点上的class,attribute,style以及绑定的事件<br>

children:vnode的子节点<br>

text:文本属性<br>

elm:这个vnode对应的真实dom节点<br>

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对比

创建新节点

老子节点数组先遍历完，添加其他新子节点

新子节点数组先遍历完，移除多余的老子节点

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

 Collect

Get Started

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

 Collect

Get Started

vue前端架构图

 Collect

Get Started

编译原理

ElasitcSearch工作原理

 Collect

Get Started

ElasitcSearch工作原理













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

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

取消

确定

Document