Vue 中的 Virtual Dom

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

　　Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍，并大大降低了内存消耗；

　　vue中模板转换成视图的大致过程是：vue.js 通过编译将 template 模板转换成渲染函数（render），执行渲染函数就可以得到一个虚拟的节点；然后在对 model 进行操作的时候，会触发 Dep 中的 Watcher 对象； watcher 对象会调用相应的 update 来修改视图，这个过程主要是将新旧虚拟节点进行差异对比，然后根据对比进行 DOM 操作来更新视图；在这个过程中主要涉及了几个概念：渲染函数、VNOde虚拟节点、patch(patching算法)；

　　　　渲染函数：主要是用来生成 virtual DOM 的；vue 虽然推荐使用 template 来构建页面，但是其实也是支持直接写渲染函数的；

　　　　VNode虚拟节点：它是节点描述，可以代表一个真实的dom，最终真实的dom就是通过createElement将VNode渲染成真实的dom的；

　　　　patch(也叫patching算法)：它是虚拟dom最核心的部分，VNode最终就是经过这个算法成为真实的dom的，这个过程是对比新旧节点之间的不同，然后根据对比结果找出需要更新的节点进行更新；

　　Virtual DOM 简单的说就是一颗树，一颗以javaScript对象（VNode）作为基础的树，用对象的属性来描述节点，因此这个对象至少包含标签名（tag）、属性（attrs）、和 子元素对象（chuildren）

　　Virtual DOM 的最终目的是将虚拟的节点渲染到视图上，其实它主要做了两件事：(1)、提供与真实DOM节点对应的虚拟节点VNode；(2)、将虚拟节点VNode和旧虚拟节点(oldVNode)进行对比，然后更新视图；

　　Virtual DOM 的优势：

　　　　(1)、具备跨平台的优势；

　　　　(2)、操作DOM慢，js运行的效率高；vue 将DOM对比放在js层，提高效率，Virtual DOM 本质上其实就是js 和 dom 之间的一个缓存，通过 patching 算法计算出真正需要更新的节点，最大限度的减少DOM操作；

　　　　(3)、提升渲染的性能；dom操作的减少，可以避免更多的回流和重绘等，更加高效的提高性能

以上是 Vue 中的 Virtual Dom 的全部内容， 来源链接： utcz.com/z/375427.html

回到顶部