持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情
本文主要介绍Vue的工作原理，不要和响应式原理弄混淆了！既然介绍了原理，顺带浅谈了一下diff算法和虚拟dom
一、Vue的工作原理是什么？
用一段话一气呵成：vue将用户编写的模板（template）编译成渲染函数（render），渲染函数根据当前的数据生成虚拟dom，虚拟dom转换成真实dom；当数据更新时通过diff算法对比新旧虚拟dom，使用patch打补丁最小化的局部更新真实dom
二、什么是虚拟dom？
定义：虚拟dom就是一个js对象（树状结构），它的优点是可以跨平台+性能提升
- 跨平台 ---> 使用虚拟dom可以更方便的实现跨平台，每个平台的真实dom是不一样的，如果直接操作真实dom就无法实现跨平台，我们就可以使用vue来开发小程序
- 性能提升 ---> vue 是先生成虚拟 dom 再转换成真实 dom，如果数据发生了改变，是先操作虚拟 dom 再更新真实 dom；因为真实 dom属性非常多，直接操作真实 dom 的话会很消耗性能，虚拟 dom 的属性比较少，操作虚拟 dom 的速度会比直接操作真实 dom 快很多
三、浅谈diff算法
定义：diff算法是一种对比树节点的算法，vue中数据发生改变就会用diff算法去对比新旧dom，diff算法的特点是同级比较，深度优先
-
同级比较（4个指针）——> 同级比较就是只会比较同一级别的虚拟的dom节点，不会跨级比较
-
深度优先（递归）——> 深度优先是指找到一个节点后比较它的所有子节点，就是从上往下进行比较，vue中是通过递归实现
具体流程 ---> 同级比较有四个指针，分别指向新旧dom的开头和结尾，进行新旧dom对比的时候，先是头和头进行比较对比，再是尾和尾进行对比较，接着是交叉对比，如果还没找的话就遍历旧虚拟dom去找，如果依然没有找到那这个元素就是新增的。如果找到了，就比较children里面的节点，以此类推循环整个新虚拟dom
