vue-09对虚拟 DOM 的理解

Hd_stn
139 阅读2分钟

方向：1、vdom是什么2、引入vdom的好处3、vdom如何生成，又如何成为dom4、在后续diff中的作用 扩展：由来，vue和react中的运用和差异

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

    1. 通过引⼊vdom我们可以获得如下好处： 将真实元素节点抽象成 VNode，有效减少直接操作 dom 次数，从⽽提⾼程序性能
    • 直接操作 dom 是有限制的，⽐如：diff、clone 等操作，⼀个真实元素上有许多的内容，如果直接对其 进⾏ diff 操作，会去额外 diff ⼀些没有必要的内容；同样的，如果需要进⾏ clone 那么需要将其全部内 容进⾏复制，这也是没必要的。但是，如果将这些操作转移到 JavaScript 对象上，那么就会变得简单 了。
    • 操作 dom 是⽐较昂贵的操作，频繁的dom操作容易引起⻚⾯的重绘和回流，但是通过抽象 VNode 进⾏ 中间处理，可以有效减少直接操作dom的次数，从⽽减少⻚⾯重绘和回流。 ⽅便实现跨平台 同⼀ VNode 节点可以渲染成不同平台上的对应的内容，⽐如：渲染在浏览器是 dom 元素节点，渲染在 Native( iOS、Android) 变为对应的控件、可以实现 SSR 、渲染到 WebGL 中等等 Vue3 中允许开发者基于 VNode 实现⾃定义渲染器（renderer），以便于针对不同平台进⾏渲染。

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

03.png

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

执行流程：在此之前，编译器已经把template变成了render函数

  • 1、首次挂载生成dom： mount=> if !mounted=> 创建createVNode => mountComponent => 绑数据setupComponent => setupRenderEffect =>递归执行render renderComponentRoot => patch(subTree)

知其所以然

avatar
文章
阅读
粉丝