vue渲染render过程，涉及模板template、虚拟DOM等

已于 2023-03-30 22:11:45 修改
阅读量633 收藏
点赞数
分类专栏： VUE 前端 文章标签： vue.js javascript 前端
于 2023-03-30 22:11:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuran1/article/details/129867601
版权

作为一个vue初级使用者，对于vue的渲染过程可能会比较疑惑。我会存在这样一个问题：每次看相关知识都觉得自己会了，然而再经过一段时间，又感觉不会了。总结一下，问题在于没有对这个问题形成一个整体的认知全貌，全是零散的知识汇总。所以这篇文章就尽量通过简单易懂的话语概括一下vue渲染的基本过程。我主要从B站、深入浅出Vue.js书籍、CSDN博客等学习该内容。

将“状态”作为输入，并生成DOM输出到页面上显示出来，这个过程叫做渲染

上面这句话很好理解，但什么是状态呢？状态可以是JS中的任意类型，Object、Array、String、Number、Boolean等都可以作为状态，这些状态可能最终会以段落、表单、链接或按钮等元素呈现在用户界面上，具体地说是呈现在页面上。可以粗略地理解为将数据呈现在页面上

在Vue.js中，使用模板来描述状态与DOM之间的映射关系。再结合上述的定义，可以得出“模板”和“渲染过程”是相关的。也就是说怎么根据模板去进行渲染操作呢？其过程如下图所示：

yuran1
关注
专栏目录
VUE的单页应用渲染过程以及核心概念（待补充）
H2279202642的博客
05-31 750
VUE的出现和渲染过程 服务端渲染 最开始的页面渲染其实是服务端渲染的，浏览器将一个静态网页得模板发给服务端，服务端通过静态网也的模板开始渲染动态页面，最后浏览器接收到服务端渲染成功后的页。 （如下图） 前后端分离 直到后端工程师的工作压力大到一定的程度的时候，渲染动态页面的工作最终由前端工程师操手。 其流程为前端写好程序代码，发送到服务端，服务端只会发送一个空白的html回来给浏览器，浏览器会开始解析css，js代码，并开始渲染页面，若需要获取各种业务数据，会向服务端继续发送ajax请求，服务端
vue模板渲染
weixin_42458965的博客
06-27 1052
把template中的模板使用vue-template-complier进行编译，模板通过编译生成AST，再由AST生成Vue的渲染函数，render函数中使用到了js中的with方法，其中返回一个createElement函数(h函数)。createElement中接收三个参数，标签，属性（class,id,style）,子元素 例如： render(){ with(this){ return createElement(param1,param2,param2); } } 模板渲染的三个.
从template到DOM(Vue.js源码角度看内部运行机制)
weixin_33915554的博客
10-15 199
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(github.com/answershuto…)的总结吧，在阅读源码的过程中也确实受益匪浅，希望自己的这些产出也会对同样想要学习Vue.js源码的小伙伴有所帮助。之前这篇文章同样在我司（大搜车）的技术博客中发表过，欢迎大家关注我司的技术博客，给个传送门blog.souche.com/。 因为对Vue.js很感兴趣，而且平时工作的技术栈也...
Vue 组件渲染流程详解
最新发布
My_wife_QBL的博客
07-04 973
Vue 组件的渲染流程包括初始化阶段、模板编译阶段、挂载阶段、更新阶段和销毁阶段。每个阶段都有相应的生命周期钩子，允许我们在组件的不同阶段执行自定义逻辑。通过理解这一流程，我们可以更好地掌握 Vue 的工作原理，并在实际开发中进行性能优化和调试。希望本文能够帮助你全面理解 Vue 组件的渲染流程，并在实际开发中发挥其最大的价值。
二、Vue 页面渲染过程
程序员爱酸奶
12-17 993
文章目录前言渲染过程番外 前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦，但是是不是感觉新虚虚的，总觉得这么多文件，项目怎么就启动起来了呢？怎么访问到8080 端口就能进入到我们的首页呢。整个的流程是怎么样的呢？ 我也是刚刚接触，所以就会有这样的困惑，所以这篇就简单的理解一下项目页面渲染的过程。 渲染过程 我们上篇文章说main.js 是无用的，是废代码，只是起到支撑框架...
Vue 页面渲染的流程
zz130428的博客
01-01 6003
在Vue核心中除了响应式原理外，视图渲染也是重中之重。我们都知道每次更新数据，都会走视图渲染的逻辑，而这当中牵扯的逻辑也是十分繁琐。本文主要解析的是初始化视图渲染流程，你将会了解到从挂载组件开始，Vue是如何构建VNode，又是如何将VNode转为真实节点并挂载到页面。初始化调用$mount挂载组件。_render开始构建VNode，核心方法为，一般会创建普通的VNode，遇到组件就创建组件类型的VNode，否则就是未知标签的VNode，构建完成传递给_update。patch阶段根据VNode。
vue-render渲染解析
写的不好之处,请指教
11-26 1716
注意： 有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D 在普通页面中使用render函数渲染组件 在webpack中配置.vue组件页面的解析 运行cnpm i vue -S将vue安装为运行依赖； 运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖； 运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue
vue渲染方式render和template的区别
11-20
在Vue.js中，有两种主要的渲染方式：`template`和`render`函数。它们都是用于定义组件的视图层，但工作原理和灵活性有所不同。理解它们的区别有助于开发更高效、可维护的Vue应用。 首先，`template`是Vue中更传统且...
Vue渲染过程浅析
10-17
综上所述，Vue的渲染过程涉及到了模板编译、虚拟DOM的生成、虚拟DOM与真实DOM的比较与更新、以及响应式系统的使用。这些机制共同保障了Vue在处理复杂用户界面时的高效率和响应速度。了解和掌握这些知识点，对于前端...
VUE源码解析——模板编译底层原理，学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM
qq_43305958的博客
09-17 1377
VUE源码解析——模板编译底层原理一、什么是模板编译？二、整体渲染过程三、模板编译内部流程抽象语法树AST总结 一、什么是模板编译？ 把写在<template></template>标签中的类似于原生HTML的内容称之为模板。 在<template></template>标签中除了写一些原生HTML的标签，我们还会写一些变量插值，或者写一些Vue指令，这些东西都是在原生HTML语法中不存在的，不被接受的。render函数会将模板内容生成对应的VNode，VNo
Vue是怎么渲染template内的标签内容的
10-15
总结起来，Vue渲染`template`内的标签内容是通过将模板编译为`render`函数，然后用该函数创建VNodes，最后对比并更新实际DOM来实现的。这一过程允许Vue高效地管理UI，并提供了强大的数据绑定和响应式能力。理解这一...
Vue之render构建、调用整体流程
玉案轩窗的博客
09-28 3486
前言 本篇文章是想要探寻下Vue中是如何处理html到vnode以及vnode转换为html的过程，主要是梳理其大概流程，一些细节流程会在单独文章的细究。
笔记：Vue选项---DOM渲染（el,template,render）
weixin_57346222的博客
12-07 1505
1.el选项： 指定被挂载元素，属性值仅限于CSS选择器或者DOM节点对象。 这里推荐使用以下语法： el:"选择器" //挂载点 2.template选项： 语法： template:"<标签>......</标签>" //模板节点创建新的DOM节点并将替换原有的DOM节点 可以放在实例中，也可以放在组件中。 3.渲染函数render选项： 使用在组件中，语法如下： render:function(createElement){
render函数和Vue的执行过程
qq_59076775的博客
02-11 2112
前言: 很多人，在Vue里面我们写一些东西会自动帮我们渲染，现在我们一起探究一下Vue的渲染工作流程吧。 一.什么是render函数？ 简单的说，在vue中我们使用模板HTML语法来组件页面的,使用render函数我们可以用js语言来构建DOM，因为vue是虚拟dom,所以在拿到template模板时也要转译程VNode的函数，而render函数构建DOM，vue就免去了转译的过程。 当使用render函数描述虚拟DOM时,Vue提供了一个函数，这个函数是构建虚拟DOM所需要的工具。官网上给他.
Vue+bpmn.js自定义流程图之render（三）
imapig_的博客
01-24 3368
bpmn自定义流程图之render
render渲染的理解汇总
zilan23的博客
06-25 3934
我们码农把 一维的指令或数据（XML、HTML、UI结构代码）转为二维或三维等方便人可见的东西的这一过程 也常被称之为 "render" 其实"渲染","绘制","画画"这三个词是一个意思.对应的英文是Render,Draw,Paint.但"渲染"的逼格要高于"绘制","绘制"的逼格要高于"画画". 我是比较倾向把渲染这个过程解释成呈现。 把三维场景呈成二维可视的图片，把网页前端的代码呈成网页上的图像。 maya 把场景中的多边形模型，各种灯光 ，材质，贴图 呈现最后一张二维的图片。 我是比较倾向
vue中关于多状态渲染不同dom的小技巧
baidu_41601048的博客
01-18 1020
如图：右侧的状态小文本和icon，根据不同的status值显现不同的状态（颜色，文本内容） 常规做法： <i v-if="build.workStatus===2" class="el-icon-loading " ></i> <i v-else-if="build.workStatus===0" class="el-icon-loading " ></i> <i v-else="build.workSt..
基于vue通用模板渲染Table
LSFQ的博客
05-19 1043
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值