Javascript 虚拟 DOM详解

目录
  • 什么是虚拟 dom？
  • 为什么需要虚拟dom？
  • 虚拟dom是如何转换为真实dom的？
  • 模板和虚拟dom的关系
  • 注入
  • 挂载
  • 完整流程
  • 总结

什么是虚拟 dom？

虚拟 dom 本质上就是一个普通的JS对象（mounted 中打印 this. _vnode 就是该对象内容），用于描述视图的界面结构

在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这也就意味着每个组件都对应一棵虚拟DOM树

vnode 是一个普通的 JS 对象，用于描述界面上应该有什么，比如：

var vnode = {
  tag: "h1",
  children: [
    { tag: undefined, text: "第一个vue应用：Hello World"}
  ]
}

上面的对象描述了：

有一个标签名为 h1 的节点，它有一个子节点，该子节点是一个文本，内容为「第一个vue应用：Hello World」

为什么需要虚拟dom？

在vue中，渲染视图会调用render函数，这种渲染不仅发生在组件创建时，同时发生在视图依赖的数据更新时。如果在渲染时，直接使用真实DOM，由于真实DOM的创建、更新、插入等操作会带来大量的性能损耗，从而就会极大的降低渲染效率。

因此，vue在渲染时，使用虚拟dom来替代真实dom，主要为解决渲染效率的问题。

对比创建js对象和真实 dom 对象效率：

结果：

创建一个真实的 dom 会伴随着创建许多的属性

虚拟dom是如何转换为真实dom的？

在一个组件实例首次被渲染时，它先生成虚拟dom树，然后根据虚拟dom树创建真实dom，并把真实dom挂载到页面中合适的位置，此时，每个虚拟dom便会对应一个真实的dom。如果页面只会刷新一次，后续不会有数据更新等问题的情况下，用虚拟 dom 的方式是比直接显示真实 dom 效率低的。

如果一个组件受响应式数据变化的影响，需要重新渲染时，它仍然会重新调用render函数，创建出一个新的虚拟dom树，用新树和旧树对比，通过对比，找出差异，然后仅更新差异部分的虚拟dom节点，最后，这些更新过的虚拟节点，会去修改它们对应的真实dom

这样一来，就保证了对真实dom达到最小的改动。

模板和虚拟dom的关系

vue框架中有一个compile（编译）模块，它主要负责将模板转换为render函数，而render函数调用后将得到虚拟dom。

编译的过程分两步：

1.将模板字符串转换成为AST（抽象语法树：用js树形结构来描述我们原始的代码；在线工具：https://astexplorer.net/）

2.将AST转换为render函数

vue 模板并不是真实的 DOM，它会被编译为虚拟 DOM

<div id="app">
  <h1>第一个vue应用：{{title}}</h1>
  <p>作者：{{author}}</p>
</div>

上面的模板会被编译为类似下面结构的虚拟 DOM

{
  tag: "div",
  children: [
    { tag: "h1", children: [ { text: "第一个vue应用：Hello World" } ] },
    { tag: "p", children: [ { text: "作者：袁" } ] }
  ]
}

如果使用传统的引入方式（script src="...vue.js"），则编译时间发生在组件第一次加载时，这称之为运行时编译。

如果是在vue-cli的默认配置下，编译发生在打包时(npm run build)，打包之后就没有模板只有 render 函数了，这称之为模板预编译。

编译是一个极其耗费性能的操作，预编译可以有效的提高运行时的性能，而且，由于运行的时候已不需要编译，vue-cli在打包时会排除掉vue中的compile模块，以减少打包体积

打包时是否需要包含 compile 模块，是通过 vue.config.js 中的 runtimeCompiler: true 来控制的，默认 false，不包含。不建议更改该配置

模板的存在，仅仅是为了让开发人员更加方便的书写界面代码

vue最终运行的时候，最终需要的是render函数，而不是模板，因此，模板中的各种语法，在虚拟dom中都是不存在的，它们都会变成虚拟dom的配置

在 vue-cli 中如果同时存在 template 和 render, 由于存在一个打包过程，其中的模板预编译会生成 render 覆盖原有的 render 函数

在 vue 中如果同时存在 template 和 render，一定是以 render 为准

虚拟 DOM 树会最终生成为真实的 DOM 树

vue通过以下逻辑生成vnode tree：

注意：虚拟节点树必须是单根的

注入

vue会将以下配置注入到vue实例：

  • data：和界面相关的数据
  • computed：通过已有数据计算得来的数据，将来详细讲解
  • methods：方法

模板中可以使用vue实例中的成员

为了防止名称冲突。因为会将data中数据代理给vue，假如说我们自己写的data名称和vue中自带的属性冲突了，那么就会覆盖vue内部的属性，所以vue会把自己内部的属性成员名称前加上 或 ， 如 果 加 上 的 是 或_，如果加上的是 或，​如果加上的是，代表是我们可以使用的，如果加上的是_，是vue自己内部使用的方法或属性，我们不需要调用

挂载

将生成的真实 DOM 树，放置到某个元素位置，称之为挂载

挂载的方式：

1.通过el:"css选择器"进行配置

2.通过vue实例.$mount(“css选择器”)进行配置

完整流程

  • 实例被创建： new Vue()
  • 注入完成之后才会有响应式，能监听到数据变化
  • 编译生成虚拟 DOM 树：首先找 render 函数，没有就找模板把它生成 render，最后运行 render，生成虚拟 DOM 树
  • 挂载完成：页面上显示

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Vue源码分析之虚拟DOM详解

    为什么需要虚拟dom? 虚拟DOM就是为了解决浏览器性能问题而被设计出来的.例如,若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量无谓的计算量.简单来说,可以把Virtual DOM 理解为一个简单的JS对象,并且最少包含标签名( tag).属性(attrs)和子元素对象( children)三个属性. ----- 元素节点: 元素节点更贴近于我们

  • Vue虚拟Dom到真实Dom的转换

    Vue虚拟Dom到真实Dom的转换

    再有一颗树形结构的Javascript对象后, 我们需要做的就是讲这棵树跟真实Dom树形成映射关系.我们先回顾之前的mountComponnet 方法: export function mountComponent(vm, el) { vm.$el = el ... callHook(vm, 'beforeMount') ... const updateComponent = function () { vm._update(vm._render()) } ... } 我们已经执行完了vm._r

  • Vue使用虚拟dom进行渲染view的方法

    前提 vue版本:v2.5.17-beta.0 触发render vue在数据更新后会自动触发view的render工作,其依赖于数据驱动:在数据驱动的工作下,每一个vue的data属性都被监听,并且在set触发时,派发事件,通知收集到的依赖,从而触发对应的操作,render工作就是其中的一个依赖,并且被每一个data属性所收集,因此每一个data属性改变后,都会触发render. vue更新监听 看一段代码 // 来自mountComponent函数 updateComponent = fun

  • vue中对虚拟dom的理解知识点总结

    vue中对虚拟dom的理解知识点总结

    本质是一个普通的js对象,用于描述视图界面结构的, 在mouted的回调中,可以输出_vnode, 通过图可以知道,_vnode中有以下几个主要的属性: tag:组件的标签名, data: 组件的属性, children: 组件的子标签 parent: 父级元素 render函数: 作用:创建虚拟dom, 每个组件都有虚拟dom,并且虚拟dom都是由render函数创建的: 使用虚拟dom树的目的:提高渲染效率 在vue中,当渲染视图时候会调用render函数.这种渲染不仅发生在组件创建时候,还

  • vue 虚拟DOM的原理

    为什么需要虚拟DOM? 如果对前端工作进行抽象的话,主要就是维护状态和更新视图,而更新视图和维护状态都需要DOM操作.其实近年来,前端的框架主要发展方向就是解放DOM操作的复杂性. 运行js的速度是很快的,大量的操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM 节点,这样就造成了很大程度上的资源浪费. 在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差.有了jQuery强大的选择器以及高度封装的API,我们可以更方便的

  • react中的虚拟dom和diff算法详解

    虚拟DOM的作用 首先我们要知道虚拟dom的出现是为了解决什么问题的,他解决我们平时频繁的直接操作DOM效率低下的问题.那么为什么我们直接操作DOM效率会低下呢? 比如我们创建一个div,我们可以在控制台查看一下这个div上自带或者继承了很多属性,尤其是我们使用js操作DOM的时候,我们的DOM本身就很复杂,js的操作也会占用很多时间,但是我们控制不了DOM元素本身,因此虚拟DOM解决的是js操作DOM这一层面,其实解决的是减少了操作dom的次数 简单实现虚拟DOM 虚拟DOM,见名知意,就是假

  • vue 虚拟DOM快速入门

    虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对象. 正常的 dom 节点在 html 中是这样表示: <div class='testId'> <p>你好</p> <p>欢迎光临</p> </div> 而在虚拟 dom 中大概是这样: { tag: 'div', attributes:{ class: ['testId']

  • Javascript 虚拟 DOM详解

    Javascript 虚拟 DOM详解

    目录 什么是虚拟 dom? 为什么需要虚拟dom? 虚拟dom是如何转换为真实dom的? 模板和虚拟dom的关系 注入 挂载 完整流程 总结 什么是虚拟 dom? 虚拟 dom 本质上就是一个普通的JS对象(mounted 中打印 this. _vnode 就是该对象内容),用于描述视图的界面结构 在vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟dom树,这也就意味着每个组件都对应一棵虚拟DOM树 vnode 是一个普通的 JS 对象,用于描述界面上应该有什么,

  • JavaScript中DOM详解

    为了达到平稳退化,向后兼容,标记分离的思想,每次写js代码时做的第一件事应该是必要的测试和检查工作: 在js文件里首先添加以下代码进行检查: window.onload = function(){ if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; if(!document.getElementsByClassName) return false; if(!docu

  • 实现JavaScript的组成----BOM和DOM详解

    我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中. window对象: BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在

  • JavaScript中BOM和DOM详解

    目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具 BOM(浏览器对象模型)

  • Javascript复制实例详解

    在做项目时有一个需求,是需要复制内容到剪切板,因为有众多浏览器,所以要兼容性很重要. 1.最简单的copy,只能在IE下使用 使用clipboardData方法 <script type="text/javascript"> function copy(){ window.clipboardData.setData("text",document.getElementById("name").value); alert("T

  • JavaScript事件概念详解(区分静态注册和动态注册)

    js中的事件 什么是事件?事件是电脑输入设备与页面进行交互的响应,我们称之为事件 事件类型 鼠标单击:例如单击button.选中checkbox和radio等元素:鼠标进入.悬浮或退出页面的某个热点:例如鼠标停在一个图片上方或者进入table的范围: 键盘按键:当按下按键或释放按键时: HTML事件:例如页面body被加载时:在表单中选取输入框或改变输入框中文本的内容:例如选中或修改了文本框中的内容: 突变事件:主要指文档底层元素发生改变时触发的事件,如DomSubtreeModified(DO

  • JavaScript 运行机制详解再浅谈Event Loop

    JavaScript 运行机制详解再浅谈Event Loop

    目录 一.为什么JavaScript是单线程? 二.任务队列 三.事件和回调函数 四.Event Loop 五.定时器 六.Node.js的Event Loop 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线

  • javascript 面向对象function详解及实例代码

    javascript 面向对象function详解及实例代码

    javascript 面向对象function详解     js中的函数有三种表示方式: //函数的第一种表示方式:函数关键字的方式 function f1() { alert("f1"); } //函数的第二种表示方式:函数字面量的方式 var f2 = function() { alert("f2"); } //函数的第三种表示方式:构造函数的方式 var f3 = new Function('var a = 100; b = 200; return a+b;'

  • Kotlin 语言中调用 JavaScript 方法实例详解

    Kotlin 语言中调用 JavaScript 方法实例详解 Kotlin 已被设计为能够与 Java 平台轻松互操作.它将 Java 类视为 Kotlin 类,并且 Java 也将 Kotlin 类视为 Java 类.但是,JavaScript 是一种动态类型语言,这意味着它不会在编译期检查类型.你可以通过动态类型在 Kotlin 中自由地与 JavaScript 交流,但是如果你想要 Kotlin 类型系统的全部威力 ,你可以为 JavaScript 库创建 Kotlin 头文件. 内联 J

随机推荐