Vue虚拟Dom节点、VDOM渲染流程、diff算法、JSX

最新推荐文章于 2022-08-17 21:12:36 发布
最新推荐文章于 2022-08-17 21:12:36 发布
阅读量573 收藏 4
点赞数 1
分类专栏： 前端 Vue 文章标签： Vue VDOM渲染流程 diff算法 JSX Vue虚拟Dom节点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42357865/article/details/102999633
版权
前端 同时被 2 个专栏收录
35 篇文章 0 订阅
订阅专栏
Vue
13 篇文章 0 订阅
订阅专栏
VDOM的渲染流程
  • 将VDOM渲染为真实的DOM——creatElement
  • 渲染流程
    • 1.通过数据拦截【es5】的Object.defineProperty中的getter和setter实现对数据进行的设置
    • 2.通过VDOM模拟真实的dom结构
    • 3.通过特定的render算法将VDOM解析
    • 4.渲染真实DOM
    • 5.当数据改变时又会再次生成VDOM
    • 6.通过diff算法同级比较新旧VDOM，生成patch补丁对象
    • 7.重新渲染正式dom，之渲染变化的部分
  • 为什么要用VDOM模拟dom结构？
    • 频繁的dom操作是性能优化的瓶颈，VDOM加载速度快
    • 操作数据要比操作真实DOM快得多
diff算法
  • diff算法来源于后端思想，用于比较两个文件的不同
  • Vue中diff算法是js层面的计算，是同级比较
  • diff算法比较后的结果是生成一个patch补丁对象
JSX
  • JSX===>javascript+xml：即在js中可以写入DOM结构
  • 为什么Vue要是用JSX？
    • 当dom结构比较复杂的时候，需要模拟VDOM就会变得复杂，而jsx正是为解决这一问题而出现的
      • jsx–>VDOM对象模型 -->diff–>patch补丁对象
      • Vue中提供了一个render，通过creatElement来生成VNode
      • Vue中的jsx需要被解析为VDOM对象模型
拙慕JULY
关注
专栏目录
React常见面试题目9w字|-7|虚拟dom,React diff 算法的原理，key,组件命名，全局的dialog,数据持久化，react和vue的区别，设计思路，
VAN
04-22 70
从本质上来说，Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对DOM的描述。
Diff算法与key的作用
qq_36582776的博客
02-14 1307
真实DOM的解析流程 1.分析html文件，构建dom树 2.分析样式，生成样式表 3.将DOM树和样式表，关联起来，构建一颗Render树 4.浏览器为每个Render树上的节点确定坐标。 5.根据坐标渲染 操作真实dom的代价：计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。 为什么用虚拟DOM好处是什么？ 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。 若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这
最简洁的方式了解 Vue的渲染机制
weixin_42274863的博客
08-09 766
大致的流程图，当然只有图并不易懂 当组件被初次渲染 第一步 从Vue的模板语法 ————> render函数 解释为什么需要render函数： template模板语法 里不仅仅有html语句，有命令，插值语法，判断，循环。 所以需要js语句来实现这些功能。 第二步 render函数生成 ——————> Vnode(虚拟节点) 在这里用到了with语法, 这里不详细说，可以深入理解一下 template。 第三步 Vnode——————> 真实节点 *以上看起来很简单，复
深入分析虚拟DOM的渲染过程和特性
油墨香^-^的博客
06-18 542
作者 | code秘密花园/ ConardLi 导读 React的虚拟 DOM和 Diff算法是 React的非常重要的核心特性，这部分源码也非常复杂，理解这部分知识的原理对更深入的掌握 React是非常必要的。 本来想将虚拟 DOM和 Diff算法放到一篇文章，写完虚拟 DOM发现文章已经很长了，所以本篇只分析虚拟 DOM。 本篇文章从源码出发，分析虚拟 DOM的核心渲染原理，以及 React对它做的性能优化点。 说实话 React源码真的很难读😅，如果本篇文章帮助到了你，那么请给个赞👍支持
说说Vue中的虚拟Dom和diff算法
congboer的博客
06-24 699
说说Vue中的虚拟Dom和diff算法 一、什么是虚拟Dom？ 虚拟Dom即vdom，它是一个Object对象模型，用来模拟真实的Dom节点的结构。 //这里写个需求，看vdom如何模拟真实dom：如果这里我想写这样一个结构： <div class = "box"> <ul> <li> 人间天堂 </li&gt...
DOM渲染流程
weixin_30369041的博客
05-15 126
渲染引擎——webkit和Gecko Firefox使用Geoko——Mozilla自主研发的渲染引擎 Safari和Chrome都使用webkit，Webkit是一款开源渲染引擎 dom渲染流程： 　　1、浏览器解析html源码，然后创建一个DOM树。在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DO...
虚拟DOM实现流程
忆初
08-06 433
  尚未使用虚拟DOM 方案一： 1． state数据 2．JSX模版 3，数据＋模版结合，生成真实的DOM，来显示 4． state发生改变 5.   数据＋模版结合，生成真实的DOM，替換原始的DOM   缺陷： 第一次生成了ー个完整的DOM片段 第二次生成了一个完整的DOM片段 第二次的D0M替换第一次的DOM，非常耗性能 方案二： 1． state数据 2．J...
vue xunidom_vue核心之虚拟DOM(vdom)
weixin_30451613的博客
12-24 109
一、真实DOM和其解析流程？浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。第三步，将DOM树和样式表，关联起来，构建一颗Rende...
「React深入」一文吃透虚拟DOM和diff算法
郊眠寺
07-20 510
大家好，我是小杜杜，React中的和是非常核心的特型，了解它们是非常有必要，只有了解，才能深入。虚拟DOM真实的DOMReact虚拟DOMdiff算法diff算法diff策略key如果你对上述问题有疑问，那么这篇文章一定能够帮助到你～跟之前一样先附上这篇的知识图，还请各位多多支持[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gi7s86Es-1658297236093)(https4536000.image?)]...
vdom:虚拟dom实现
05-15
它的JSX语法允许开发者像编写HTML一样编写组件，实际上这些 JSX 代码会被编译成虚拟DOM节点。React的`useState`和`useEffect`等 hooks 也与虚拟DOM紧密相关，用于管理组件状态和副作用。 6. **其他框架的虚拟DOM** ...
虚拟DOM工作流程(vue/React)
weixin_45752063的博客
10-15 443
虚拟DOM工作流程(vue/React) vue 根据模板 ->创建虚拟dom(jsx) render函数渲染jsx -> 虚拟对象模型 在mounterd显然真实dom Data选项数据改变时 再一次生成vdom 通过diff算法【使用js进行比较】比对生成patch补丁对象 根据patch补丁对象重新渲染真实dom React 根据模板 -> vdom [jsx] render渲染jsx -> 虚拟dom对象模型 在componentDidmount渲染真实dom 当da
Mini-Vue之渲染系统实现（render）及diff算法
weixin_49172439的博客
08-17 508
事实上，Vue源码包含三大核心：Compiler模块：模板编译系统；Runtime模块：也可以称之为Render（渲染）模块，真正的渲染模块；Reactivity模块：响应式系统。
vue渲染原理
zhou_mu_mu_xi的博客
02-26 600
1.第一次渲染创建一颗虚拟dom树 2.数据发生改变后，生成一颗新的dom树 3.对比新旧两颗虚拟dom树，通过diff算法找到并记录差异的地方 4.只将差异的地方重新渲染到页面中 虚拟dom对象:实际就是一个普通的js对象，作用是用来描述一段HTML结构，这个虚拟对象配合了vue内部的diff算法，然后去找到vue更新了哪个地方，然后再把那个地方更新到页面就行了 key的作用主要是为了高效的更新...
VUE框架优化 - Render渲染 diff算法 -立哥开发
weixin_45806384的博客
04-30 339
//剑气纵横三万里 //一剑光寒九百州 import { diff } from './diff'; import { createElement, patch } from './patch'; function flatten(arr) { return function h(type, props, ...children) { props = props || {}; return { type, props, children: flatten(children) }...
vue渲染过程解析-VDOM &DOM
weixin_48109878的博客
11-02 266
前言从上篇文章《vue编译过程分析》中，我们了解到HTML模板经过编译，最终会生成一个render函数。render函数的主要功能是生成vnode。在vue的渲染过程中总共涉及两大工作：...
vdom例子
soul7y的博客
06-28 167
之前一直使用Vue来做项目，然后需要实现一个查询和获取全部结果的功能，样式如下： 一开始加载全部退款结果，然后我们可以输入条件进行查询（eg：输入操作者姓名）。当查询之后我们点击全部按钮，需要使查询条件置空，显示全部内容。并且当我们下一次进入该页面之后，需要加载上次的结果。 例如如果我们上次用操作者姓名为张三进行查找，这时我们去别的页面然后回来进入此页面，则呈现张三查询结果。如果我们先用张三进行查询然后点击全部按钮，则我们去别的页面然后回来进入此页面后，呈现全部的结果。 先放关键代码，解释原因之后其余部分代
VDOM
Ellie棒棒哒的博客
03-17 249
VDOM 是什么？为什么会存在VDOM？ VDOM如何应用，核心API是什么 介绍diff算法 VDOM是什么？为什么会存在VDOM？ 在MVVM开发方式中，页面的变化都是用数据去驱动的，而数据更新后，到底要去改那一块的DOM哪？ 虽然可以先删除那个部分再按照当前新的数据去重新生成一个新的页面或生成那一个部分（jQuery做法），但是这样肯定非常耗费性能的。 而且JS操作DOM是非常复杂，JS...
vdom
qq_33699819的博客
03-31 817
vdom 是什么？为何会存在 vdom？ virtual dom ， 虚拟 DOM 用 JS 模拟 DOM 结构 DOM 操作非常“昂贵” 将 DOM 对比操作放在 JS层，提高效率 vdom 如何应用，核心 API 是什么 如何使用？可用 snabbdom 的用法来举例 核心 API：h 函数、patch 函数 介绍一下 diff 算法 知道什么是 diff 算法，是 linux 的基...
深入理解Vue虚拟DOM与diff算法：提升性能的关键
本文将深入探讨Vue框架中的核心概念——虚拟DOM和diff算法。首先，虚拟DOM（Virtual DOM）是Vue和React等现代前端框架中实现高性能UI更新的关键技术。它并非真正的DOM，而是使用JavaScript对象来模拟和表示实际DOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值