VUE -- 基础知识讲解（二）

 【点赞收藏加关注，前端技术不迷路~】

一、虚拟DOM

1.什么是vdom？

        虚拟dom顾名思义就是虚拟的dom对象，它本身就是一个 JavaScript 对象，只不过它是通过不同的属性去描述一个视图结构。

2.引入vdom的好处

1）将真实元素节点抽象成 VNode，有效减少直接操作 dom 次数，从而提高程序性能

        直接操作 dom 是有限制的，比如：diff、clone 等操作，一个真实元素上有许多的内容，如果直接对其进行 diff 操作，会去额外 diff 一些没有必要的内容；同样的，如果需要进行 clone ，那么需要将其全部内容进行复制，这也是没必要的。但是，如果将这些操作转移到 JavaScript 对象上，那么就会变得简单 了。

        操作 dom 是比较昂贵的操作，频繁的dom操作容易引起页面的重绘和回流，但是通过抽象 VNode 进行中间处理，可以有效减少直接操作dom的次数，从而减少页面重绘和回流。

2）方便实现跨平台

        同⼀ VNode 节点可以渲染成不同平台上的对应的内容，比如：渲染在浏览器是 dom 元素节点，渲染在 Native( iOS、Android) 变为对应的控件、可以实现 SSR 、渲染到 WebGL 中等等

        Vue3 中允许开发者基于 VNode 实现自定义渲染器（renderer），以便于针对不同平台进行渲染。

3.vdom生成过程

        在vue中我们常常会为组件编写模板 - template， 这个模板会被编译器 - compiler编译为渲染函数，在接下来的挂载（mount）过程中会调用render函数，返回的对象就是虚拟dom。但它们还不是真正的dom，所以会在后续的patch过程中进⼀步转化为dom。

4.vdom在后续的diff中的作用

        挂载过程结束后，vue程序进⼊更新流程。如果某些响应式数据发生变化，将会引起组件重新render，此时就会生成新的vdom，和上⼀次的渲染结果diff就能得到变化的地方，从而转换为最小量的dom操作，高效更新视图。

5.vue2和vue3中diff的区别

        Vue中虚拟dom的源码是vNode。

        Vue2中diff算法过程中，比对的是虚拟dom的所有树节点。

        Vue3中，在生成虚拟Dom时，将可能发生变化的动态元素放入vNode.dynamicChildren，再次diff时，只比对dynamicChildren的一维数组，用存储来换取时间，更新更高效。

6.相关源码

        vnode定义：（VUE相关源码）

        创建vnode：createElementBlock: （VUE相关源码）createVnode:（VUE相关源码）

        ⾸次调⽤时刻：（VUE相关源码）

        mount:（VUE相关源码）

二、diff算法

1.diff算法的作用

        Vue中的diff算法称为patching算法（补丁算法），它由Snabbdom修改而来，虚拟DOM要想转化为真实DOM就需要通过 patch方法转换。

2.diff算法的必要性

        最初Vue1.x视图中每个依赖均有更新函数对应，可以做到精准更新，因此并不需要虚拟DOM和patching算法支持，但是这样粒度过细导致Vue1.x无法承载较大应用；Vue 2.x中为了降低Watcher粒度，每个组件只有⼀个Watcher与之对应，此时就需要引入patching算法才能精确找到发生变化的地方并高效更新。

3.diff算法何时执行

        vue中diff执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行render函数获得最新的虚拟DOM，然后执行patch函数，并传入新旧两次虚拟DOM，通过比对两者找到变化的地方，最后将其转化为对应的DOM操作。

4.diff算法具体执行方式

patch过程是⼀个