Vue采用虚拟DOM的目的是什么?(vue2 虚拟dom)
ccwgpt 2025-07-09 11:18 3 浏览 0 评论
虚拟 DOM 更新其实效率并不像大家想象中的那么高,而且 React 官方也从来没说过虚拟 DOM 效率有多高,相反React 虚拟 DOM 的实现也不是所有虚拟 DOM 产品中最好的。
但是通过虚拟DOM的抽象能力,我们拥有了声明式写UI的能力,大大提高了我们的[工作效率」,具体是为什么这要讲到VDOM和真实DOM的相似度来说了。
一、VDOM和真实DOM的相似度
HTML tag 书写方式和 json 的书写方式是差不多的:他们都是树形结构。
DOM是一个树形结构,这个树形结构对应的就是我们的HTML tag,书写HTML其实并不是很费脑,因为一切都抽象成了一个人能够看懂的Tag,层级之间的关系就好像画图一样。如果我们使用javascript api 去书写 HTML tag 是非常痛苦的,所以开发人员就瞄上了和HTML tag 有相似结构的json数据格式。因为json又是javascript的原生对象,所以就让[在javascript中声明式书写html 带来了可能]
但是能够书写html远远已经不能满足我们现代工业的需求,我们需要一种机制:
1、能够声明式地书写html
2、能够在javascript 中书写 html
3、能够小粒度地复用我们的这些"html"
那么,通过babel转化的jsx就应运而生了,让人们拥有了使用js写html并且声明式又可以控制粒度的复用
二、Vue采用虚拟DOM的目的
上面那堆话说的是虚拟DOM的作用,那么Vue引入虚拟DOM的目的就很容易理解了:
1. Vue 2.0引入 vdom 的主要原因是 vdom 把渲染过程抽象化了,从而使得组件的抽象能力也得到提升,并且可以适配DOM以外的渲染目标。
2.不再依赖HTML解析器进行模版解析,可以进行更多的AOT工作提高运行时效率:通过模版AOT编译,Vue的运行时体积可以进一步压缩,运行时效率可以进一步提升;
3.可以渲染到DOM以外的平台,实现SSR、同构温染这些高级特性,Weex等框架应用的就是这一特性。
三、对虚拟DOM的理解
很多人喜欢把数据的更新和虚拟 DOM 进行强行绑定,实际上数据是否更新更快 虚拟 DOM 关系真的不大。
虚拟DOM只有在HTML tag(或者是VDOM的node type)剧烈变化的时候才会体现他的好处:局部替换HTML tag(替换vnode)。任你数据再怎么变都好,其实DOM本身根本不懂你数据是否变化。因此,明白这些以后,应该就能明白,虚拟DOM引入最大的好处就是:
1.组件的高度抽象化
2.可以更好的实现SSR,同构渲染等
3.框架跨平台TG:li9047
相关推荐
- 如何高效实现API接口的自动化测试?
-
实现API接口的自动化测试是一个多步骤的过程,涉及需求分析、测试用例设计、环境搭建、脚本编写、执行测试、结果分析和持续集成等多个环节。选择合适的工具和框架也是成功的关键。嘿,咱来聊聊实现API接口自动...
- 总结100+前端优质库,让你成为前端百事通
-
1年多时间,陆陆续续整理了一些常用且实用的开源项目,方便大家更高效地学习和工作.js相关库js常用工具类「lodash」一个一致性、模块化、高性能的JavaScript实用工具库。「xij...
- 混合开发到底怎么个混法?(混合开发rn)
-
引言最近几年混合开发越来越火,从PhoneGap到Cordova到Ionic,再到ReactNative,到Flutter。同时在搜索引擎中诸如IonicVSReactNativeRN和Weex+...
- 无所不能,将 Vue 渲染到嵌入式液晶屏
-
该文章转载自公众号@前端时刻,https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言之前看了雪碧大佬的将React渲染到嵌入式液晶屏觉得很有意思,R...
- 【直接收藏】前端 VUE 高阶面试题(一)
-
说说vue动态权限绑定渲染列表(权限列表渲染)首先请求服务器,获取当前用户的权限数据,比如请求this.$http.get("rights/list");获取到权限数据之后,在列表中...
- Vue采用虚拟DOM的目的是什么?(vue2 虚拟dom)
-
虚拟DOM更新其实效率并不像大家想象中的那么高,而且React官方也从来没说过虚拟DOM效率有多高,相反React虚拟DOM的实现也不是所有虚拟DOM产品中最好的。但是通过虚拟D...
- 什么是 JavaScript?(什么是党的旗帜)
-
本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注!作者|慕课网精英讲师然冬JavaScript(JS)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。(MDN...
- Weex在内涵发现页中的工程实践(weex唯客交易所官网)
-
React-Native和Weex是目前最为火热的两个客户端跨平台解决方案。从去年2016年9月份开始,IES在抖音产品中应用了ReactNative,中途遇到了很多的问题,尤其是长列表的性能问题一...
- 新恒汇:公司主要业务包括智能卡业务、蚀刻引线框架业务以及物联网eSIM芯片封测业务
-
证券日报网讯新恒汇7月3日在互动平台回答投资者提问时表示,公司主要业务包括智能卡业务、蚀刻引线框架业务以及物联网eSIM芯片封测业务。具体请关注公司公告和公开披露信息。(编辑王雪儿)...
- “移”科普——什么是物联网?(移动设备物联网物联网应用实例)
-
物联网(InternetofThings,简称IoT)是指通过互联网将物理世界与数字世界相连接,实现物与物之间的智能互联的网络。它是一种新型的信息通信技术,通过传感器、嵌入式系统、网络技术等手段,...
- 如何自己搭建一个物联网平台?(自建物联网云平台)
-
自己搭建一个物联网(IoT)平台需要涉及多个关键步骤,包括硬件设备的选择、软件开发、网络通信、安全性设计以及数据管理。以下是搭建物联网平台的基本流程:1.确定物联网平台架构一个完整的物联网平台通常包...
- 物联网数据接入篇-应用层 Modbus(5)
-
前四篇文章讲述的是TCP/IP模型中的网络接口层、网络层、传输层、应用层一,这里到了第四层应用层二。由于协议比较多,就分开篇来介绍。这篇讲Modbus协议,后面再讲MQTT协议、CoAP协议、...
- 乐鑫ESP32-C5全面量产:行业首款双频Wi-Fi 6的RISC-V SoC
-
IT之家5月2日消息,乐鑫信息科技4月30日宣布,ESP32-C5现已全面进入量产。ESP32-C5宣称是行业首款2.4&5GHz双频Wi-Fi6的RISC-...
- Vue Shop Admin:强大而易用的后台管理系统模板
-
VueShopAdmin是一个基于Vue.js框架的后台管理系统模板。它具有简洁、易用和美观的特点,非常适合开发人员用于快速构建各种类型的管理系统。这个模板使用了最新的技术,如Vue3、V...
- 基于Prometheus的自动化巡检(prometheus自动发现详解)
-
!!大家好,我是乔克,一个爱折腾的运维工程,一个睡觉都被自己丑醒的云原生爱好者。作者:乔克公众号:运维开发故事道路千万条,安全第一条。操作不规范,运维两行泪。前言目前,大部分公司都采用Promet...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- ui自动化框架 (47)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)