render和虚拟DOM

最新推荐文章于 2024-06-16 12:29:55 发布
原创 最新推荐文章于 2024-06-16 12:29:55 发布 · 438 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍Vue中render函数及虚拟DOM的作用与用法，包括通过render函数创建组件、响应式原理、虚拟DOM的优势及其在Vue中的实现方式。

render和虚拟DOM

作用：一个组件的内容有两种书写方式
  1. template：通过模板语法指定组件内容
  2. render函数：通过render来确定组件内容

用法：

<script>
export default {
    functional:true
    //h是一个函数，这个函数的返回值是VNode（虚拟DOM）
    render:(h)=>{
        retrun h('h1','这是一个h1标签,且是一个组件')
    }
}
</script>

可以用template创造组件，也可以用render创造组件

如果template配置项和render配置项同时存在，以render为准

响应式：数据发生变化会再次调用render函数，产生新的虚拟dom，与初始的虚拟dom比较，通过变动更新真实dom

在这里插入图片描述

优点：render相对template更加灵活

函数h中有三个参数：

  1. 参数1：标签名
  2. 参数2：对参数1中的标签的属性设置
  3. 参数3：参数1的子元素，也可以是一个VNode数组
h('div',{'class':'myDiv'},'我是div的内容')
<div class="myDiv">我是div的内容</div>

每一个组件都会有一个render函数，用来根据不同的数据生成不同的虚拟DOM

一般通过template定义组件，vue内部会自动生成render函数

虚拟DOM

真实DOM是一个对象，它的属性非常多，在浏览器中做dom操作会消耗性能
虚拟DOM也是一个对象，但是属性相对较少，消耗性能较少，它无法在浏览器中直接显示

为什么Vue中会用到虚拟DOM
  • 虚拟DOM比真是DOM体积小一些，操作相对来说性能消耗少一些，假设要在页面删除一个DOM元素，会重绘页面
  • 虚拟DOM才可能跨端（服务器端也可以用vue），跨平台。如果直接操作真实DOM，则与浏览器强制绑定在一起，vue就失去了更多的可能性

Vue如何使用虚拟DOM

  • 所有的template都会编译成render函数
  • render函数会根据当前的数据项，生成虚拟DOM
  • 再从虚拟dom转成真实dom
jin_____
关注
Render函数之一《什么是虚拟DOM》
吴小花的博客
03-17 743
0.前言 虚拟DOM概念随着react的诞生而诞生，由facebook提出，其卓越的性能很快得到广大开发者的认可；继react之后vue2.0也在其核心引入了虚拟DOM的概念。 1.真实DOM和其解析流程？ 浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步，用HT...
vue虚拟dom详解
欧阳的技术博客
08-28 1343
从 vue1.x 设计理念说起 对vue发展史比较熟悉的同学，应该知道这件事： vue1.0 并没有虚拟dom这玩意，而是是采用数据绑定、依赖收集的方式去观察数据变化并保留对实际 DOM 元素的引用，当有数据变化时进行对应的操作，每一个观测的render Watcher 对应的就是一个真实的DOM节点。 好处是少量数据更新对比Virtual DOM 性能更好，坏处是大量数据更新、初始渲染性能、对比Virtual DOM 性能更差。 渲染列表时当数据全新的时候，需要销毁之前的所有实例，重新创..
十二、虚拟 DOM 和 render() 函数（1）
热门推荐
走在bug的路上
11-23 1万+
● 虚拟DOM ● render()函数
vue3学习之TSX
weixin_44996782的博客
01-05 412
--
vue render函数_Vue源码全面解析三十六 _render函数（生成vnode虚拟DOM结构）
weixin_39629129的博客
12-08 441
我们打开“src/core/instance/render.js”文件，代码如下：Vue.prototype._render = function (): VNode { const vm: Component = this const { render, _parentVnode } = vm.$options if (_parentVnode) { vm.$scop...
虚拟DOM（真实DOM）
频繁记录
06-15 232
虚拟DOM（真实DOM）
Vue Render函数创建DOM节点代码实例
10-15
`render` 函数允许开发者直接使用JavaScript来生成虚拟DOM（VDOM），进而控制DOM的创建和更新。 在Vue中，`render` 函数接收一个参数 `createElement`，这个函数是用于创建虚拟DOM节点的。在上述代码实例中，我们...
vue 源码解析之虚拟Dom-render
10-16
总的来说，Vue的虚拟DOM和`render`过程涉及到了组件的渲染逻辑、DOM更新的调度以及对不同环境的兼容策略。通过理解这些源码细节，开发者可以更好地掌握Vue的工作原理，优化应用性能，以及更深入地调试和解决问题。
浅谈React的最大亮点之虚拟DOM
08-27
在React中，当我们使用render方法去渲染组件时，我们得到的不是真正的DOM节点，而是一个轻量级的JavaScript对象，这就是虚拟DOM。它的工作原理是在内存中维护一份虚拟的DOM树，当组件的状态发生变化时，React首先会...
virtual DOM和真实DOM的区别_详解Vue中的虚拟DOM
weixin_39713317的博客
11-20 754
摘要： 什么是虚拟DOM?作者：浪里行舟Fundebug经授权转载，版权归原作者所有。前言Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍，并大大降低了内存消耗。那么，什么是Virtual DOM？为什么需要Virtual DOM？它是通过什么方式去提升页面渲染效率的呢？这是本文所要探讨的问题。模板转换成视图的过程在正式介绍 Virtual Dom...
React怎么创建虚拟dom和挂载到页面
10-27
类组件通过render方法返回虚拟DOM结构，而函数组件则返回虚拟DOM的描述。 2. 使用JSX语法：JSX是JavaScript的一种语法扩展，它允许我们在JavaScript代码中书写类似HTML的标签结构。React使用JSX来创建虚拟DOM，它会...
虚拟dom--render函数
weixin_52934055的博客
03-25 1420
** 现在时代的开发最求高效率,高应用,高频率快速迭代开发!!!,JavaScript做为大前端的唯一开发语言,在很多的时候原生的js并不能满足热门的开发需求,于是各种高效开发的框架层出不穷,基于最近几年新出的这些框架的底层大多依赖于虚拟dom的快速开发,并不同于以往的jQuer的dom开发,极大地提高了开发人员的开发效率和维护效率** 轮子会开固然很好,但是会开久了,就会深纠于如何自己造出轮子!!! 提起轮子那么一定要知道虚拟dom这个轮子到底提我们干了什么,下面一张图解释一下,浏览器解析js的过程**
render函数动态创建dom，并和创建的子组件进行传值交互
weixin_44860226的博客
03-28 3600
render函数语法及基本用法 render函数创建dom元素，的一般格式为： render: function (createElement) { return createElement('div', {}, []) } //createElement('', {}, [])有三个参数 /** 第一个参数可以为HTML标签名，如'div' 或者为封装的一个组件名（如组件名为querySelect，第一个参数就为querySelect **/ /** 第二个参数为第一个参数所创建的模板的属性对.
render函数与虚拟dom
weixin_小白鼠的博客
07-02 644
虚拟dom是什么：用来描述dom的js对象作用：vue在更新真实DOM前，虚拟dom会进行diff运算，比较更新前后虚拟DOM结构中的有差异的部分，然后采用异步更新队列的方式将差异的部分更新到真实DOM中，从而减少了最终要在真实DOM上执行的操作次数，提高了页面渲染的效率 从模板到真实dom： 模板 -> 进行编译 -> 成render函数 -> 虚拟dom -> 真实dom如果直接使用render函数，就省略了模板的编译过程，vue运行的更快render函数就是用于实现虚拟dom的使用render函数代替
vue虚拟DOM和render()函数
leva的博客
06-16 881
因为每次查询DOM几乎都需要遍历整个DOM树，如果建立一个与DOM树对应的虚拟DOM对象，也就是JavaScript对象，以对象嵌套的方式来表示DOM树及其层级结构，那么每次DOM的修改就变成了对JavaScript对象的属性的操作，由于操作JavaScript对象比操作DOM要快得多，从而大幅度减少性能的开支。在谷歌浏览器中运行程序.由于锚点标题的使用非常频繁，考虑到标题的级别包括h1～h6，可以将标题的级别定义成组件的prop，在调用组件时，可以通过该prop动态设置标题元素的级别。
虚拟DOM与render函数
嗨皮的博客
01-31 1306
vue底层的实现方法与vue在浏览器中的渲染机制
Angular学习笔记64：使用Render2安全操作DOM元素
W先生
10-06 4765
在项目中有时候需要直接操作DOM，但是这样直接访问 DOM 会导致应用很容易受到在 XSS 攻击。所以并不建议直接访问 DOM。 在Angular 访问DOM 需要使用 Render2 来实现自定义渲染。 Renderer2类是Angular以服务的形式提供的抽象类，允许操作当前应用的元素，而不用直接访问最原始的DOM元素。 官方API abstract class Renderer2 { ...
【手写 Vue2.x 源码】第十七篇 - 生成 render 函数 - 函数生成
BraveWangDev
01-11 635
本篇，生成 render 函数 - 函数生成，主要做了以下两件事：1，使用 with 对生成的 code 进行一次包装；2，将包装后的完整 code 字符串，通过 new Function 输出为 render 函数；
VUE源码解析——模板编译底层原理，学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM
qq_43305958的博客
09-17 1529
VUE源码解析——模板编译底层原理一、什么是模板编译？二、整体渲染过程三、模板编译内部流程抽象语法树AST总结 一、什么是模板编译？ 把写在<template></template>标签中的类似于原生HTML的内容称之为模板。 在<template></template>标签中除了写一些原生HTML的标签，我们还会写一些变量插值，或者写一些Vue指令，这些东西都是在原生HTML语法中不存在的，不被接受的。render函数会将模板内容生成对应的VNode，VNo
操作真实dom和虚拟dom的区别
最新发布
09-18
操作真实DOM和虚拟DOM存在多方面的区别： - **性能消耗**：操作真实DOM时，会频繁触发重排和重绘，性能消耗为真实DOM增删改加上重排重绘；而虚拟DOM不会进行重排和重绘，总消耗性能为虚拟DOM的增删改、真实DOM差异增删改和重排重绘，相对来说虚拟DOM能减少不必要的重排和重绘，性能更优[^2]。 - **操作方式**：操作真实DOM是直接对浏览器渲染页面的实际结构进行增删改查等操作，需要手动管理DOM的变化，容易出现性能问题；虚拟DOM是一个编程概念，开发者以声明式的方式编写代码描述UI的状态，框架会处理虚拟DOM到真实DOM的映射和更新，开发者不必担心性能问题[^3]。 - **更新流程**：当数据发生改变时，操作真实DOM需要直接修改实际的DOM结构；而虚拟DOM先是调用render函数创建出一个新的虚拟DOM树，将新旧虚拟DOM树对比，找到最小更新量然后更新虚拟DOM节点，最后根据更新过的虚拟DOM节点，去修改对应的真实DOM节点[^4]。 以下是简单的代码示例说明两者操作方式的不同： #### 操作真实DOM ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div id="myDiv">原始内容</div> <script> // 获取真实DOM元素 const div = document.getElementById('myDiv'); // 直接修改真实DOM内容 div.textContent = '修改后的内容'; </script> </body> </html> ``` #### 操作虚拟DOM（以Vue为例） ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app">{{ message }}</div> <script> new Vue({ el: '#app', data: { message: '原始内容' }, mounted() { // 修改数据，Vue框架会自动处理虚拟DOM到真实DOM的更新 this.message = '修改后的内容'; } }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值