Vue虚拟DOM详细介绍_vue.js

来源:脚本之家  责任编辑:小易  
目录
一、什么是虚拟DOM二、为什么需要虚拟DOM三、虚拟DOM介绍

一、什么是虚拟DOM

虚拟DOM是对真是DOM的抽象,以JavaScript对象(VNode节点)作为基础的树,用对象的属性来描述节点,最终可以通过一系列操作使这棵树映射到真实环境上。Javascript对象中,虚拟DOM表现为一个Object对象,并且最少包含标签名(tag)、属性(attrs)和子元素对象(children)三个属性。创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中,所以虚拟DOM对象的节点与真实DOM的属性一一照应。真实DOM
<div id="app">
    <p class="p">节点内容</p>
    <h3>{{ foo }}</h3>
</div>
实例化vue
const app = new Vue({
    el:"#app",
    data:{
        foo:"foo"
    }
})
观察render的render,我们能得到虚拟DOM
(function anonymous(
) {
	with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
					  [_v("节点内容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})
通过VNode,vue可以对这棵抽象树进行创建节点、删除节点以及修改节点的操作,经过diff算法得出一些需要修改的最小单位,再更新视图,减少了dom操作,提高了性能。

二、为什么需要虚拟DOM

DOM其实是很慢的,哪怕一个最简单的div也包含着很多的属性。因此操作DOM的代价仍旧是昂贵的,频繁操作还是会出现页面卡顿,影响用户的体验。用传统的原生api或jQuery操作DOM时,浏览器会从构建DOM树开始从头到尾执行一遍流程。如:当要更新10个DOM节点时,浏览器收到第一个更新DOM请求后,并不知道后续还有9次更新操作,会马上执行流程,最终执行10次流程。通过VNode,同样更新10个DOM节点,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地的一个js对象中,最终将这个js对象一次性attach到DOM树上,避免大量的无谓计算。虚拟DOM最大的优势在于抽象了原本的渲染过程,实现了跨平台的能力,不仅仅局限于浏览器的DOM,还可以是其他组件。

三、虚拟DOM介绍

回答:虚拟DOM是对真实DOM的一种抽象,会根据DOM标签的名字、属性、孩子对真实DOM进行映射。使用虚拟DOM的原因是,真实DOM其实是很慢的,一个简单的标签也包含了许多属性。同时真实DOM进行更新时的过程很笨拙,虚拟DOM使用diff算法,可以很轻便的进行DOM的操作。

到此这篇关于Vue虚拟DOM详细介绍的文章就介绍到这了,更多相关Vue虚拟DOM内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:vue中虚拟DOM与Diff算法知识精讲vue中的虚拟dom知识点总结Vue的虚拟DOM和diff算法你了解吗Vue虚拟Dom到真实Dom的转换vue中对虚拟dom的理解知识点总结Vue源码分析之虚拟DOM详解vue 虚拟DOM快速入门关于Vue虚拟dom问题vue 虚拟DOM的原理

  • 本文相关:
  • vue项目打包以及优化的实现步骤
  • 关于vuessr的一些理解和详细配置
  • vue 动态组件components和v-once指令的实现
  • vue生命周期activated之返回上一页不重新请求数据操作
  • 值得收藏的vuejs安装教程
  • vue框架里使用swiper的方法示例
  • vue中datepicker的使用教程实例代码详解
  • vue3不支持filters过滤器的问题
  • vue 实现从小到大的横向滑动效果详解
  • vue 获取数组键名的方法
  • Vue.js 2.0新增的虚拟DOM是怎么回事
  • vue实现dom元素的上移下移?
  • 如何在指定的vue组件或者dom元素外层添加组件?
  • vue中如何操作真实dom插入一个div标签?
  • vue中如何获取dom元素
  • 解决vue页面DOM操作不生效的问题
  • vue获取DOM元素并设置属性的两种实现方法
  • vue mounted dom节点生成了吗
  • vue 判断dom有没有这个类
  • vue获取dom元素注意事项
  • Vue 在更新 DOM 时是异步执行的,怎么理解吗?
  • vue怎么获取dom元素?
  • VUE DOM加载后执行自定义事件的方法
  • vue如何判断dom的class
  • vue怎么获取dom元素
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首页javascriptjavascript类库vue.jsvue中虚拟dom与diff算法知识精讲vue中的虚拟dom知识点总结vue的虚拟dom和diff算法你了解吗vue虚拟dom到真实dom的转换vue中对虚拟dom的理解知识点总结vue源码分析之虚拟dom详解vue 虚拟dom快速入门关于vue虚拟dom问题vue 虚拟dom的原理vue项目打包以及优化的实现步骤关于vuessr的一些理解和详细配置vue 动态组件components和v-once指令的实现vue生命周期activated之返回上一页不重新请求数据操作值得收藏的vuejs安装教程vue框架里使用swiper的方法示例vue中datepicker的使用教程实例代码详解vue3不支持filters过滤器的问题vue 实现从小到大的横向滑动效果详解vue 获取数组键名的方法vue引用js文件的多种方式(推荐)vue跳转页面的几种方法(推荐)详解vue 路由跳转四种方式 (带参数)vue项目刷新当前页面的三种方法vue之父子组件间通信实例讲解(props、$ref、$emvue props用法详解(小结)vue.js中created方法作用element-ui中select组件绑定值改变,触发chavue实现文件上传功能vue元素的隐藏和显示(v-show指令)vue-router懒加载速度缓慢问题及解决方法vue+axios实现文件下载及vue中使用axios的实例vue中radio根据动态值绑定checked无效的解决浅谈vue中慎用style的scoped属性vue3中watch的用法与最佳实践指南web面试mvc与mvvm区别及vue为什么不完全遵守mvvm解答十分钟封装一个好用的axios步骤示例浅谈vue中插槽slot的使用方法如何使用hbuilderx把vue项目打包成apkvue项目服务器部署之子目录部署方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved