Vue.js 2.0窥探之Virtual DOM到底是什么？

Virtual DOM是什么？

在之前，React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了。 若想了解它是如何工作的，就要先认清这几个概念：

1.更新DOM是非常昂贵的操作

当我们使用Javascript来修改我们的页面，浏览器已经做了一些工作，以找到DOM节点进行更改，例如：

document.getElementById('myId').appendChild(myNewNode);

在现代的应用中，会有成千上万数量个DOM节点。所以因更新的时候产生的计算非常昂贵。琐碎且频繁的更新会使页面缓慢，同时这也是不可避免的。

2.我们可以用JavaScript对象来代替DOM节点

DOM节点在HTML文档中的表现通常是这样的：

<ul id='myId'>
 <li>Item 1</li>
 <li>Item 2</li>
<ul>

DOM节点也可以表示为一个JavaScript对象，就像这样：

//用Javascript代码表示DOM节点的伪代码
Let domNode = {
 tag: 'ul'
 attributes: { id: 'myId' }
 children: [
//这里是 li
 ]
};

这就是虚拟的DOM节点，很好理解吧。

3.更新虚拟节点， 并不昂贵贵

//更新虚拟DOM的代码
domNode.children.push('<ul>Item 3</ul>');

如果我们用一个虚拟DOM，而不是直接调用像.getElementById的方法，这样只操作JavaScript对象，这样是相当便宜的。

然后，再把更改的部分更新到真正的DOM，方法如下：

//这个方法是调用DOM API来更改真正DOM的
//它会分批执行从而获取更高的效率
sync(originalDomNode, domNode);

Vue.js在2.0 版本中引入虚拟DOM是一个正确的选择吗 ？

引入虚拟DOM实际上有优点也缺点。

1、尺寸

更多的功能意味着更多的代码。幸运的是Vue.js 2.0仍然是相当小的（21.4kb当前版本）。

2、内存

虚拟DOM需要在内存中的维护一份DOM的副本。在DOM更新速度和使用内存空间之间取得平衡。

3、不是适合所有情况

如果虚拟DOM大量更改，这是合适的。但是单一的，频繁的更新的话，虚拟DOM将会花费更多的时间处理计算的工作。
所以，如果你有一个DOM节点相对较少页面，用虚拟DOM，它实际上有可能会更慢。
但对于大多数单页面应用，这应该都会更快。

除了性能提升外还有什么

引入虚拟DOM，这不仅仅是一种性能增强，这同时意味着更多的功能。

例如，您可以在虚拟DOM中的 render() 方法直接创建新的节点：

new Vue({
 el: '#app',
 data: {
 message: 'hello world'
 },
 render() {
 var node = this.$createElement;
 return node(
 'div',
 { attrs: { id: 'myId' } },
 this.message
 );
 }
});

输出：

<div id='app'>
 <div id='myId'>hello world</div>
</div>

为什么这样做？你可以用全编程语言JavaScript编程，您可以创建工厂式的功能来建立虚拟节点。

总结

以上就是在这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • 在vue中获取dom元素内容的方法

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template> <div> <div id="box" ref="mybox"> DEMO </div> </div> </template> <script> export default { data () { return { } }, mounted

  • Vue实现virtual-dom的原理简析

    Vue实现virtual-dom的原理简析

    virtual-dom(后文简称vdom)的概念大规模的推广还是得益于react出现,virtual-dom也是react这个框架的非常重要的特性之一.相比于频繁的手动去操作dom而带来性能问题,vdom很好的将dom做了一层映射关系,进而将在我们本需要直接进行dom的一系列操作,映射到了操作vdom,而vdom上定义了关于真实dom的一些关键的信息,vdom完全是用js去实现,和宿主浏览器没有任何联系,此外得益于js的执行速度,将原本需要在真实dom进行的创建节点,删除节点,添加节点等一系列复

  • vue的Virtual Dom实现snabbdom解密

    vue的Virtual Dom实现snabbdom解密

    vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使用了 Virtual Dom 实现这一点,但 Vue 的 Virtual Dom 实现(复刻自 snabbdom)是更加轻量化的,因此也就比 React 的实现更高效. 看到火到不行的国产前端框架vue也在用别人的 Virtual Dom开源方案,是不是很好奇snabbdom有何强大之处呢?不过正式

  • 探究Vue.js 2.0新增的虚拟DOM

    你可能早就已经听说了 Vue.js 2.0.一个主要的令人兴奋的新特性就是更新页面的"虚拟DOM"的加入. 虚拟 DOM 可以做什么? React 和 Ember 都使用了虚拟DOM来提升页面的刷新速度.为了理解其如何工作,让我们先讨论一下几个概念: 更新DOM的花费时间非常长 当我们使用 JavaScript 来改变页面的时候,浏览器不得不做一些工作来找到需要的DOM节点,并且做出类似这样的改变: document.getElementById('myId').appendChild

  • 详解在Vue中通过自定义指令获取dom元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定

  • Vue AST源码解析第一篇

    Vue AST源码解析第一篇

    讲完了数据劫持原理和一堆初始化,现在是DOM相关的代码了. 上一节是从这个函数开始的: // Line-3924 Vue.prototype._init = function(options) { // 大量初始化 // ... // Go! if (vm.$options.el) { vm.$mount(vm.$options.el); } }; 弄完data属性的数据绑定后,开始处理el属性,也就是挂载的DOM节点,这里的vm.$options.el也就是传进去的'#app'字符串. 有一个

  • Vue获取DOM元素样式和样式更改示例

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template> <div style="display: block;" ref="abc"> <!-- ... --> </div> </template> <script>

  • vue动态生成dom并且自动绑定事件

    用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据. html: <div id="app"> <table v-for="table in tables"> <tr v-for="row in table.row"> <td style="width:80px;float:le

  • vue指令以及dom操作详解

    "AngularJS 通过被称为 指令 的新属性来扩展 HTML.AngularJS 通过内置的指令来为应用添加功能.AngularJS 允许你自定义指令." 这是我最初接触"指令"这个词.还记得那时候,ng大行其道的时候,我特别好奇怎么给一个div加一个"ng-app" 就能解决这么多问题. 后来随着前端工作的深入,我用了jq的data-attr并且学会了jq的插件使用.但,这这并不能让我把它"指令"联想到一块,后来插件需要

  • 利用vue.js插入dom节点的方法

    本文主要介绍的是vue.js插入dom节点的方法,下面话不多说,来看看详细的介绍吧. html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var myAppendTo = Vue.extend({ template:'<p>appendTo</p>' }) va

随机推荐