绝招----Vue原理(2)

diff算法  vdom diff

树diff的时间复杂度是 O(n^3) 不可用的复杂度
1.遍历tree1
2.遍历tree2

3.排序

结论 1000个节点 要计算1亿次

冒泡排序时间复杂度也是 n^2 基本也是不可用

vdom diff算法优化后的时间复杂度就是 O(n)【并不是百分之百优化】

1.只比较同一层级 不跨级比较

2.当key或者tag不等 则直接删掉重建 不再深度比较

3.tag和key两者都相同  认为是相同节点 （需要深度比较 oldNode和newNode的text和children,以及后边children数组的一系列对比）

snabbdom源码解读

h函数（标签，data，子元素）【子元素有可能是字符串/也可能是多个dom节点】

h函数  返回一个 vnode结构

patch函数 

diff算法总结：

patchVnode addVnodes removeVnodes  updateChildren(key的重要性)

diff算法作为vdmo核心api

价值：数据驱动视图 控制DOM操作（组件渲染和更新过程）

二.模板编译的前置知识点

vue模板中有指令 插值 js表达式 能循环 能判断 不是html 到底是什么 （html只是标签语言）

vue template complier 将模板编译为 render函数

执行render函数 生成vnode

patch函数可以渲染vnode

更新：我们响应式可以监听变化 变化后生成新的render函数 vnode patch函数

vue模板编译成了什么

模板编译为render函数 用的with语法

vue可以用render代替template

组件渲染/更新过程(VUE三大核心知识点)

1.响应式  监听data属性的 getter setter（包括数组）

2.模板函数 ：模板到render函数，再到vnode

3.vdom： patch（ele, vnode）patch（vnode, newVnode）patch（vnode, null）

1.初次渲染

解析模板为render函数 （一般在开发环境编译就完成了（集成webpack）  vue-loader）

触发响应式，监听data的 属性 gettrt setter

执行render函数，生成vnode，patch（ele, vnode）

2.更新渲染

修改data 触发setter （此前getter中已经被监听【之前被观察的变量 已经被监听了】）

重新执行render函数  生成 nexVnode

patch（vnode， newVnode）【此处diff算法计算最小偏差量】

3.异步渲染

$nextTick

汇总data的修改 一次性更新视图(1.同步修改data的时候 把修改汇总到一个队列中。2.异步取得这个队列，将其中的数据汇总，第三汇总的结果同一修改data 触发更新)

减少dom操作 提高性能

总结：

渲染和响应式  模板编译 vdom